{"id":13607150,"url":"https://github.com/iGoodie/vite-plugin-react-rich-svg","last_synced_at":"2025-04-12T11:31:38.875Z","repository":{"id":216572300,"uuid":"741424885","full_name":"iGoodie/vite-plugin-react-rich-svg","owner":"iGoodie","description":"🖼 Seamless Vite SVG loader with versatile import options! (Such as dataURI, component and raw html code)","archived":false,"fork":false,"pushed_at":"2024-05-09T14:05:22.000Z","size":1812,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-10T15:09:41.849Z","etag":null,"topics":["all-in-one","import","loader","prettier","rich","svg","svgr","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"https://igoodie.github.io/vite-plugin-react-rich-svg/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc-by-sa-4.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iGoodie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"patreon":"iGoodie"}},"created_at":"2024-01-10T11:18:55.000Z","updated_at":"2024-08-01T19:40:39.434Z","dependencies_parsed_at":"2024-03-05T17:31:22.040Z","dependency_job_id":"f212f1b9-5e6e-41a1-9d88-a362498a1f3f","html_url":"https://github.com/iGoodie/vite-plugin-react-rich-svg","commit_stats":null,"previous_names":["igoodie/vite-plugin-react-rich-svg"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fvite-plugin-react-rich-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fvite-plugin-react-rich-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fvite-plugin-react-rich-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iGoodie%2Fvite-plugin-react-rich-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iGoodie","download_url":"https://codeload.github.com/iGoodie/vite-plugin-react-rich-svg/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223513943,"owners_count":17158096,"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":["all-in-one","import","loader","prettier","rich","svg","svgr","vite","vite-plugin"],"created_at":"2024-08-01T19:01:15.999Z","updated_at":"2025-04-12T11:31:38.867Z","avatar_url":"https://github.com/iGoodie.png","language":"TypeScript","funding_links":["https://patreon.com/iGoodie","https://www.patreon.com/iGoodie"],"categories":["Plugins"],"sub_categories":["React"],"readme":"\u003c!-- Logo --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/vite-plugin-react-rich-svg/master/.github/assets/logo.svg\" height=\"100px\" alt=\"Logo\"/\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Vite Plugin: React Rich SVG\n\u003c/h1\u003e\n\n\u003c!-- Slogan --\u003e\n\u003cp align=\"center\"\u003e\n   Seamless SVG loader with versatile import options (see \u003ca href=\"https://igoodie.github.io/vite-plugin-react-rich-svg/\"\u003edemo page\u003c/a\u003e)\n\u003c/p\u003e\n\u003c!-- Badges --\u003e\n\u003cp align=\"center\"\u003e\n\n  \u003c!-- Main Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/paper-editor/master/.github/assets/main-badge.svg\" height=\"20px\"/\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-react-rich-svg\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-react-rich-svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/vite-plugin-react-rich-svg/tags\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/v/tag/iGoodie/vite-plugin-react-rich-svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/vite-plugin-react-rich-svg\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/languages/top/iGoodie/vite-plugin-react-rich-svg\"/\u003e\n  \u003c/a\u003e\n\n  \u003cbr/\u003e\n\n  \u003c!-- Github Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/paper-editor/master/.github/assets/github-badge.svg\" height=\"20px\"/\u003e\n  \u003ca href=\"https://github.com/iGoodie/vite-plugin-react-rich-svg/commits/master\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/last-commit/iGoodie/vite-plugin-react-rich-svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/vite-plugin-react-rich-svg/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/iGoodie/vite-plugin-react-rich-svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iGoodie/vite-plugin-react-rich-svg/tree/master/src\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/languages/code-size/iGoodie/vite-plugin-react-rich-svg\"/\u003e\n  \u003c/a\u003e\n\n  \u003cbr/\u003e\n\n  \u003c!-- Support Badges --\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/iGoodie/paper-editor/master/.github/assets/support-badge.svg\" height=\"20px\"/\u003e\n  \u003ca href=\"https://discord.gg/KNxxdvN\"\u003e\n    \u003cimg src=\"https://img.shields.io/discord/610497509437210624?label=discord\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.patreon.com/iGoodie\"\u003e\n    \u003cimg src=\"https://img.shields.io/endpoint.svg?url=https%3A%2F%2Fshieldsio-patreon.vercel.app%2Fapi%3Fusername%3DiGoodie%26type%3Dpatrons\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n# Description\n\nA vite plugin that handles SVG loading with zero-config effort.\n\nIt handles loading raw (html string), inline data uri (`data:svg+xml,...`) and SVGR Component (with easily usable SVGO options) imports easily!\n\nThis plugin is heavily inspired by [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader), which is an SVG loading Vite plugin for Vue. It is one of my favourites. Thanks to everyone contributed to it! 💜\n\n# How to use?\n\n1. Use your favorite package manager to install as dependency\n\n```\nnpm install vite-plugin-react-rich-svg --save-dev\n```\n\n2. Include it in your `vite.config.ts`\n\n```ts\nimport richSvg from \"vite-plugin-react-rich-svg\";\n\nexport default defineConfig({\n  plugins: [react(), richSvg()],\n});\n```\n\n3. If you're using Typescript, you might want to include the typings under `vite-env.d.ts`:\n\n```tsx\n// Caveat: referencing our plugin first will ensure vite types do not overlap\n\n/// \u003creference types=\"vite-plugin-react-rich-svg/client\" /\u003e\n/// \u003creference types=\"vite/client\" /\u003e\n```\n\n4. Start importing your SVGs! Happy coding!\n\n```ts\n// Raw string import\nimport viteLogoRaw from \"./assets/vite.svg?raw\";\n\n// Data URL import\nimport viteLogoDataURL from \"./assets/vite.svg?url\";\n\n// Base64 Encoded import\nimport viteLogoBase64 from \"./assets/vite.svg?base64\";\n\n// SVGR Component import\nimport ViteLogoComponent from \"./assets/vite.svg?component\";\n\n// Default import, not handled by our plugin\nimport viteLogo from \"./assets/vite.svg\";\n```\n\n# Plugin Configurations\n\n## `include` option\n\nActs as a whitelist predicate for the files you want to be processed.\n\n```ts\n  richSvg({\n    include: (path) =\u003e /.*\\.icon\\.svg$/.test(path),\n    // ^ This config will only process files that look like:\n    // ...chevron-right.icon.svg?raw\n    // ...chevron-left.icon.svg?component\n    // ...home.icon.svg?url\n  }),\n```\n\n## `exclude` option\n\nActs as a blacklist predicate for the files you want to be ignored.\n\n```ts\n  richSvg({\n    exclude: (path) =\u003e /.*\\.ignore\\.svg$/.test(path),\n    // ^ This config will ignore files that look like:\n    // ...my-illustration.ignore.svg?raw\n    // ...my-illustration.ignore.svg?component\n    // ...my-illustration.ignore.svg?url\n  }),\n```\n\n## `componentLoaderOptions` option\n\n- `svgrConfig` = Options used while running SVGR on the original svg code/asset (See [SVGR Options](https://react-svgr.com/docs/options/))\n\n- `esbuildConfig` = Options used to generate import code with given SVGR output (See [ESBuild Transform Options](https://esbuild.github.io/api/#transform))\n\n```ts\n  richSvg({\n    componentLoaderOptions: {\n      svgrConfig: {\n        ref: true,\n        memo: true,\n      },\n      // ^ This config will make it load component svg imports loads with forwardedRef \u0026 memo wrapped\n\n\n      esbuildConfig:{\n        minify: true\n      },\n      // ^ This config will make it load component svg imports loads with minification enabled\n    },\n  }),\n```\n\n## `rawLoaderOptions` option\n\n- `svgoEnabled` = Enables SVGO optimizations\n\n- `svgoConfig` = Options used while running SVGO optimizations on the original SVG asset (See [SVGO Options](https://github.com/svg/svgo#configuration))\n\n```ts\n  richSvg({\n    rawLoaderOptions: {\n      svgoEnabled: true,\n      svgoConfig: {},\n    },\n  }),\n```\n\n## `base64LoaderOptions` option\n\n- `svgoEnabled` = Enables SVGO optimizations\n\n- `svgoConfig` = Options used while running SVGO optimizations on the original SVG asset (See [SVGO Options](https://github.com/svg/svgo#configuration))\n\n```ts\n  richSvg({\n    base64LoaderOptions: {\n      svgoEnabled: true,\n      svgoConfig: {},\n    },\n  }),\n```\n\n## `urlLoaderOptions` option\n\n- `svgoEnabled` = Enables SVGO optimizations\n\n- `svgoConfig` = Options used while running SVGO optimizations on the original SVG asset (See [SVGO Options](https://github.com/svg/svgo#configuration))\n\n```ts\n  richSvg({\n    urlLoaderOptions: {\n      svgoEnabled: true,\n      svgoConfig: {},\n    },\n  }),\n```\n\n# SVGO, Prettier \u0026 Other SVGR Plugins\n\nSVGO and Prettier are supported out of the box. Just mark them in the svgrConfig and they'll start working.\n\nYou can also include your own SVGR plugins as you desire!\n\n```ts\nimport myCustomSvgrPlugin from \"my-custom-svgr-plugin\";\nimport myCustomSvgoPlugin from \"my-custom-svgo-plugin\";\nimport myCustomPrettierPlugin from \"my-custom-prettier-plugin\";\n\nrichSvg({\n  componentLoaderOptions: {\n    svgrConfig: {\n      svgo: true,\n      prettier: true,\n      prettierConfig: {\n        plugins: [\"prettier-plugin-foo\"]\n      },\n      plugins: [myCustomSvgrPlugin],\n    },\n  },\n  rawLoaderOptions: {\n    svgoEnabled: true,\n    svgoConfig: {\n      plugins: [myCustomSvgoPlugin]\n    }\n  },\n  base64LoaderOptions: {\n    svgoEnabled: true,\n    svgoConfig: {\n      plugins: [myCustomSvgoPlugin]\n    }\n  },\n  urlLoaderOptions: {\n    svgoEnabled: true,\n    svgoConfig: {\n      plugins: [myCustomSvgoPlugin]\n    }\n  }\n}),\n```\n\n## License\n\n\u0026copy; 2024 Taha Anılcan Metinyurt (iGoodie)\n\nFor any part of this work for which the license is applicable, this work is licensed under the [Attribution-ShareAlike 4.0 International](http://creativecommons.org/licenses/by-sa/4.0/) license. (See LICENSE).\n\n\u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by-sa/4.0/\"\u003e\u003cimg alt=\"Creative Commons License\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by-sa/4.0/88x31.png\" /\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiGoodie%2Fvite-plugin-react-rich-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FiGoodie%2Fvite-plugin-react-rich-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiGoodie%2Fvite-plugin-react-rich-svg/lists"}