{"id":13531938,"url":"https://github.com/jfgodoy/vite-plugin-solid-svg","last_synced_at":"2025-04-09T16:20:21.856Z","repository":{"id":42463235,"uuid":"393765273","full_name":"jfgodoy/vite-plugin-solid-svg","owner":"jfgodoy","description":"Vite plugin to Import SVG files as Solid.js Components","archived":false,"fork":false,"pushed_at":"2024-03-26T02:17:21.000Z","size":193,"stargazers_count":75,"open_issues_count":4,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-20T12:51:37.992Z","etag":null,"topics":[],"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/jfgodoy.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-08-07T18:44:38.000Z","updated_at":"2024-10-14T09:58:31.000Z","dependencies_parsed_at":"2023-12-19T05:16:17.912Z","dependency_job_id":"d84ca4b2-f712-4478-80e8-86dd364e27cc","html_url":"https://github.com/jfgodoy/vite-plugin-solid-svg","commit_stats":{"total_commits":42,"total_committers":5,"mean_commits":8.4,"dds":"0.16666666666666663","last_synced_commit":"f6460037edf72fe0defa234e438e012e65a807d6"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfgodoy%2Fvite-plugin-solid-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfgodoy%2Fvite-plugin-solid-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfgodoy%2Fvite-plugin-solid-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jfgodoy%2Fvite-plugin-solid-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jfgodoy","download_url":"https://codeload.github.com/jfgodoy/vite-plugin-solid-svg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065281,"owners_count":21041872,"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":[],"created_at":"2024-08-01T07:01:07.039Z","updated_at":"2025-04-09T16:20:21.794Z","avatar_url":"https://github.com/jfgodoy.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries","Plugins"],"sub_categories":["UI Components","Solid"],"readme":"\u003ch1 align=\"center\"\u003evite-plugin-solid-svg\u003c/h1\u003e\n\u003cp align=\"center\"\u003eExtend Vite with ability to use SVG files as Solid.js components.\u003c/p\u003e\n\n### Features:\n\n- [SVGO](https://github.com/svg/svgo) optimization\n- Hot Module Replacement support\n- Support for `?component-solid` query string\n- SSR\n\n#### Currently supported Vite version:\n\n\u003cp\u003e\u003ccode\u003e4 or above\u003c/code\u003e\u003c/p\u003e\n\n### Install\n\n```bash\nyarn add --dev vite-plugin-solid-svg\n\npnpm i -D vite-plugin-solid-svg\n```\n\n### Setup\n\n```js\n// vite.config.js\nimport solidPlugin from 'vite-plugin-solid'\nimport solidSvg from 'vite-plugin-solid-svg'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [solidPlugin(), solidSvg()],\n})\n```\n\n#### typescript\n\nvite adds its own definition for `\"*.svg\"` and defines them as `string`. As far as I know this cannot be overridden.\nSo we have two options: put our types before those of vite, or use imports with querystring.\n\nIf you are using `defaultAsComponent` which is the default, you need to put our types definition before vite in the tsconfig.\n```jsonc\n// tsconfig.json\n\"compilerOptions\": {\n  \"types\": [\n    \"vite-plugin-solid-svg/types-component-solid\"\n    \"vite/client\",\n  ],\n},\n```\nif you change to `defaultAsComponent=false`, you should use a different type definition that only identifies an svg import as a solid component when it matches the querystring. And in this case, put it before `\"vite/client\"`\n\n```jsonc\n// tsconfig.json\n\"compilerOptions\": {\n  \"types\": [\n    \"vite-plugin-solid-svg/types\",\n    \"vite/client\"\n  ],\n},\n```\n\n```ts\nimport MyIcon from './my-icon.svg';     // \u003c-- this will match vite module definition, and therefore identified as string\nimport MyIcon from './my-icon.svg?component-solid';     // \u003c-- this will match the definition in this plugin, and therefore identified as Solid Component\n```\n\n#### Options\n\n```js\nSolidSvg({\n  /**\n   * If true, will export as JSX component if `as` isn't specified.\n   *\n   * Otherwise will export as url, or as JSX component if '?as=component-solid'\n   *\n   */\n  defaultAsComponent: true,\n\n  svgo: {\n    enabled: true, // optional, by default is true\n    svgoConfig: \u003csvgo config\u003e  // optional, if defined, the file svgo.config.js is not loaded.\n  }\n})\n```\n\nIf you need to configure `svgo`, you can also create a config file `svgo.config.js` in the project's root, following the instructions at [svgo docs](https://github.com/svg/svgo). The `svgo.svgoConfig` has precedence over the file.\n\n### Usage\n\nImport as a Solid.js component:\n\n```tsx\nimport MyIcon from './my-icon.svg?component-solid';\n// or './my-icon.svg' if `defaultAsComponent` is `true`\nimport MyIcon from './my-icon.svg';\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n        \u003ch1\u003e Title \u003c/h1\u003e\n        \u003cMyIcon /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\nTo import all svg inside a folder, use `import.meta.glob('@/svgs/*.svg', { as: 'component-solid' })`. See [Vite docs](https://vitejs.dev/guide/features.html#static-assets) for more details.\n\n\n```tsx\nconst icons = import.meta.glob('./*.svg', { as: 'component-solid' })\n\n/*\n  icons = {\n    icon1: () =\u003e import(\"./icon1.svg\"),\n    icon2: () =\u003e import(\"./icon2.svg\")\n  }\n*/\n\nconst App = () =\u003e {\n  const Icon1 = lazy(() =\u003e iconsDic.icon1())\n  return (\n    \u003cdiv\u003e\n        \u003cp\u003ehello\u003c/p\u003e\u003cIcon1 /\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n```\n\n### Why\n\nIn a Solidjs + vite project, you can easily add an svg image using:\n\n```tsx\nimport iconUrl from './icon.svg'\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cimg href={iconUrl}\u003e\n    \u003c/div\u003e\n  )\n}\n\n```\n\nHowever the fill color of the image cannot be overriden. Importing the svg as a component solves this and allows css styles to cascade into the svg content. Furthermore there may be situations where you'll need to ensure the image has been fully loaded, for example, before starting an animation. This module gives you a component that you can control when it's loaded.\n\n# Credits\n\nThis plugin is based on the work from the following projects:\n\n- https://github.com/visualfanatic/vite-svg\n- https://github.com/cobbcheng/vite-plugin-svgstring\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfgodoy%2Fvite-plugin-solid-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjfgodoy%2Fvite-plugin-solid-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjfgodoy%2Fvite-plugin-solid-svg/lists"}