{"id":16791991,"url":"https://github.com/metonym/svelvg","last_synced_at":"2026-03-02T16:37:03.764Z","repository":{"id":40123109,"uuid":"391477864","full_name":"metonym/svelvg","owner":"metonym","description":"Convert SVG files into Svelte components with TypeScript definitions","archived":false,"fork":false,"pushed_at":"2024-08-27T18:55:44.000Z","size":1958,"stargazers_count":44,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-05T05:46:09.991Z","etag":null,"topics":["svelte","svelte-compiler","svg","svg-icons","typescript"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metonym.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-31T22:55:27.000Z","updated_at":"2025-02-03T10:19:26.000Z","dependencies_parsed_at":"2024-06-18T22:48:23.338Z","dependency_job_id":"92eeb88c-22d1-4546-ae38-9e532c11bdfe","html_url":"https://github.com/metonym/svelvg","commit_stats":{"total_commits":133,"total_committers":2,"mean_commits":66.5,"dds":0.007518796992481258,"last_synced_commit":"af78f8472e0ea2261c2329c77d896b4707968e03"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/metonym/svelvg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelvg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelvg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelvg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelvg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/svelvg/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fsvelvg/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260474346,"owners_count":23014708,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svelte","svelte-compiler","svg","svg-icons","typescript"],"created_at":"2024-10-13T08:43:46.753Z","updated_at":"2026-03-02T16:36:58.723Z","avatar_url":"https://github.com/metonym.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelvg\n\n\u003e Convert SVG files into Svelte components with TypeScript definitions.\n\n\u003e Successor to [svg-to-svelte](https://github.com/metonym/svg-to-svelte)\n\nThe minimum Svelte version required to use types generated by this library is v3.55.0.\n\nThis library transforms SVG files into Svelte components through the following:\n\n- convert the `svg` file name into a valid module name (e.g., `alarm-fill` --\u003e `AlarmFill`)\n- forward `$$restProps` to the `svg` element while preserving attributes from the original `svg`\n- add a default `slot` as child element to `svg`\n- generate a TypeScript definition by extending the `SvelteComponentTyped` interface\n\n## Usage\n\n### CLI\n\nThe easiest way to use this library is through [npx](https://nodejs.dev/learn/the-npx-nodejs-package-runner).\n\nThe `glob` value represents the relative path to the folder containing SVG files inside `node_modules/`.\n\nFor example, say you have [bootstrap-icons](https://github.com/twbs/icons) installed as a development dependency, which contains icon SVG files in the \"icons\" folder.\n\n```sh\nnpx svelvg glob=bootstrap-icons/icons\n```\n\nBy default, the output directory is `\"lib\"`. Customize the directory using the `outDir` flag:\n\n```sh\nnpx svelvg glob=bootstrap-icons/icons outDir=dist\n```\n\nOptionally, generate an index of icons (a list of all module names) by enabling the `iconIndex` flag. It will default to creating a `ICON_INDEX.md` file in your working directory.\n\n```sh\nnpx svelvg glob=bootstrap-icons/icons iconIndex\n```\n\nCustomize the icon index file name like so:\n\n```sh\nnpx svelvg glob=bootstrap-icons/icons iconIndex=ICONS.md\n```\n\n### Programmatic usage\n\nAlternatively, install `svelvg` from NPM to use it programmatically.\n\n```sh\n# NPM\nnpm i -D svelvg\n\n# pnpm\npnpm i -D svelvg\n\n# Bun\nbun add -D svelvg\n\n# Yarn\nyarn add -D svelvg\n```\n\n```js\nimport { createLibrary } from \"svelvg\";\n\n// Generate Svelte components from SVG files in `node_modules/bootstrap-icons/icons`.\n// By default, output is emitted to the `lib` directory.\ncreateLibrary(\"bootstrap-icons/icons\");\n\n// Customize the output directory to `dist`.\ncreateLibrary(\"bootstrap-icons/icons\", { outDir: \"dist\" });\n```\n\n### API\n\n#### `createLibrary`\n\n```ts\ntype CreateLibraryOptions = {\n  /** @default \"lib\" */\n  outDir: string;\n\n  /** @default false */\n  iconIndex: boolean | string;\n\n  /**\n   * Callback to add a list of classes to the SVG element\n   * provided the original filename and module name\n   * @example\n   * filename: \"alarm-fill\"\n   * moduleName: \"AlarmFill\"\n   */\n  appendClassNames: (filename: string, moduleName: string) =\u003e string[];\n\n  /**\n   * Override the default module name\n   */\n  toModuleName: (params: {\n    path: path.ParsedPath;\n    moduleName: string;\n  }) =\u003e string;\n};\n```\n\n## Template\n\nScaffold a new project using the [template](template):\n\n```sh\nnpx degit metonym/svelvg/template \u003cfolder-name\u003e\n```\n\n### `IconLibrary.svelte`\n\n`svelvg` exports an `IconLibrary.svelte` to make listing and searching icons easier.\n\nSee [template/index.html](template/index.html) for an example.\n\n```html\n\u003cscript type=\"module\"\u003e\n  import IconLibrary from \"svelvg/lib/IconLibrary.svelte\";\n  import * as icons from \"./lib\";\n  import pkg from \"./package.json\";\n\n  const app = new IconLibrary({\n    target: document.getElementById(\"svelte\"),\n    props: {\n      pkg,\n      icons,\n    },\n  });\n\u003c/script\u003e\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelvg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fsvelvg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fsvelvg/lists"}