{"id":20297062,"url":"https://github.com/mtmeyer/svg-svelte","last_synced_at":"2026-05-08T06:16:10.682Z","repository":{"id":57375580,"uuid":"392520750","full_name":"mtmeyer/svg-svelte","owner":"mtmeyer","description":"A simple CLI tool to convert SVG's into Svelte components","archived":false,"fork":false,"pushed_at":"2021-08-07T04:48:53.000Z","size":142,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-04-25T22:02:00.017Z","etag":null,"topics":["cli","nodejs","svelte","svg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/mtmeyer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-04T02:26:37.000Z","updated_at":"2021-08-07T04:48:56.000Z","dependencies_parsed_at":"2022-09-14T03:00:29.081Z","dependency_job_id":null,"html_url":"https://github.com/mtmeyer/svg-svelte","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtmeyer%2Fsvg-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtmeyer%2Fsvg-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtmeyer%2Fsvg-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mtmeyer%2Fsvg-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mtmeyer","download_url":"https://codeload.github.com/mtmeyer/svg-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241794111,"owners_count":20021188,"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":["cli","nodejs","svelte","svg"],"created_at":"2024-11-14T15:43:45.766Z","updated_at":"2026-05-08T06:16:10.622Z","avatar_url":"https://github.com/mtmeyer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVG to Svelte\n\n![](img/banner.svg)\n\nA simple CLI tool to create Svelte components from SVG's\u003csup\u003e1\u003c/sup\u003e\n\n_This tool is in currently in beta so please report any bugs or issues 🙏_\n\n## Get started\n\nTo begin first open your chosen terminal and navigate to the directory of SVG's in your project.\n\n```sh\ncd \u003cyour project svg directory\u003e\n```\n\nOnce there run the following command.\n\n```sh\nnpx svg-svelte\n```\n\nThis will search the current directory for SVG files (not subdirectories yet) and output a Svelte component for each SVG. These components are placed into a new folder named `output`.\n\nYou can then move the Svelte files to wherever you need them in the project and use them as you would any other Svelte component:\n\n```svelte\n\u003cscript\u003e\n  import Icon from './components/awesome-icon.svelte'\n\u003c/script\u003e\n\n\u003cIcon width={24} height={24} fill=\"#FF3E00\" /\u003e\n```\n\n### Caveats\n\nIn its current state this tool is really only suited to single colour icons. During the conversion process it will overwrite any different fills you have on different paths.\n\nIt has also not been tested on more complex SVG's yet.\n\n## Roadmap\n\nHere's what I'm planning to add to the tool:\n\n- Input arguments (e.g. `input` and `output` directories)\n- Subdirectory support\n- Support for more complex svg's\n\n---\n\n\u003csup\u003e1\u003c/sup\u003e Note: I am not affiliated with Svelte\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtmeyer%2Fsvg-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmtmeyer%2Fsvg-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmtmeyer%2Fsvg-svelte/lists"}