{"id":22547081,"url":"https://github.com/kiwilan/unplugin-svg-transformer","last_synced_at":"2025-08-11T16:07:10.414Z","repository":{"id":178537256,"uuid":"661985940","full_name":"kiwilan/unplugin-svg-transformer","owner":"kiwilan","description":"Import easily your SVG. Powered by unplugin.","archived":false,"fork":false,"pushed_at":"2024-01-14T10:25:55.000Z","size":1553,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T18:18:21.184Z","etag":null,"topics":["icons","javascript","nuxt","react","rollup","svg","typescript","unplugin","vite","vue","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/unplugin-svg-transformer","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/kiwilan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":{"github":["ewilan-riviere"]}},"created_at":"2023-07-04T05:49:17.000Z","updated_at":"2025-03-07T03:20:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"ddba3f94-2fd2-41f7-9dd4-a9245bc7abe2","html_url":"https://github.com/kiwilan/unplugin-svg-transformer","commit_stats":null,"previous_names":["kiwilan/vite-plugin-svg","kiwilan/vite-plugin-svg-transformer"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/kiwilan/unplugin-svg-transformer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwilan%2Funplugin-svg-transformer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwilan%2Funplugin-svg-transformer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwilan%2Funplugin-svg-transformer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwilan%2Funplugin-svg-transformer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiwilan","download_url":"https://codeload.github.com/kiwilan/unplugin-svg-transformer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiwilan%2Funplugin-svg-transformer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269814222,"owners_count":24479356,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["icons","javascript","nuxt","react","rollup","svg","typescript","unplugin","vite","vue","webpack"],"created_at":"2024-12-07T15:10:03.995Z","updated_at":"2025-08-11T16:07:10.370Z","avatar_url":"https://github.com/kiwilan.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ewilan-riviere"],"categories":[],"sub_categories":[],"readme":"![Banner with unplugin logo and unplugin-svg-transformer title, a SVG logo inserted for svg in title](https://raw.githubusercontent.com/kiwilan/unplugin-svg-transformer/main/docs/banner.jpg)\n\n# unplugin-svg-transformer\n\n[![unplugin][unplugin-version-src]][unplugin-version-href]\n[![version][version-src]][version-href]\n[![downloads][downloads-src]][downloads-href]\n[![license][license-src]][license-href]\n\n[![tests][tests-src]][tests-href]\n[![codecov][codecov-src]][codecov-href]\n[![style][style-src]][style-href]\n\nImport easily your SVG. Powered by [unplugin](https://github.com/unjs/unplugin).\n\n\u003e Designed to be a replacement of [`kiwilan/nuxt-svg-transformer`](https://github.com/kiwilan/nuxt-svg-transformer), a Nuxt module.\n\nUse SVG into modern tools is not easy, especially when you want to use SVG as component. **This plugin will parse your SVG files** and **create a cache file** to **import them easily with a library index file**. It **works with any framework with Vite/Webpack**, but some components are ready-to-use for Vue, Nuxt and React. You could also create your own component for your favorite framework. **Built for TypeScript, but works with JavaScript**.\n\n\u003e **Note**\n\u003e\n\u003e If you want to use SVG from icon sets, you should use [`unplugin-icons`](https://github.com/unplugin/unplugin-icons), a very good plugin from [unplugin](https://github.com/unplugin). `unplugin-svg-transformer` is only for custom SVG.\n\n```ts\nimport type { SvgName } from \"unplugin-svg-transformer/icons\";\nimport { importSvg, svgList } from \"unplugin-svg-transformer/icons\";\n\nconst icon: SvgName = \"svg-name\";\nconst svg = await importSvg(\"svg-name\"); // param fully typed (SvgName), string output\nconst list = svgList; // as Record\u003cSvgName, () =\u003e Promise\u003c{ default: string }\u003e\u003e\n```\n\n\u003e **Note**\n\u003e\n\u003e A demo is available on [Stackblitz](https://stackblitz.com/github/ewilan-riviere/unplugin-svg-transformer-example) or directly on [github.com/ewilan-riviere/unplugin-svg-transformer-example](https://github.com/ewilan-riviere/unplugin-svg-transformer-example).\n\n## Features\n\n- 🟨 [unplugin](https://github.com/unjs/unplugin): [Vite](https://vitejs.dev/), [Rollup](https://rollupjs.org/guide/en/), [Webpack](https://webpack.js.org/), [esbuild](https://esbuild.github.io/) support\n- 🪄 Not a SVG loader, but a SVG transformer\n- 🔥 Hot reloading when SVG added or removed\n- 🗃️ Index to list all SVG to import them easily\n- 🗂 Seperated cache SVG files\n- 🚚 Can be import into any JS / TS file\n- 📦 Components ready, no import needed, SVG directly injected\n  - [Vue 3](https://vuejs.org/) / [Nuxt 3](https://nuxt.com) component\n  - [React](https://react.dev/) component\n  - [Svelte](https://svelte.dev/) not included, here is an example [`./examples/svelte/src/lib/SvgIcon.svelte`](./examples/svelte/src/lib/SvgIcon.svelte)\n- 🐘 [Laravel Inertia](https://inertiajs.com/) compatible with [`laravel-vite-plugin`](https://github.com/laravel/vite-plugin) as Vite plugin\n- 🎨 Options to add or clear `style` and `class` global attributes\n- 🦾 SVG typed (`typescript` required)\n\n### Roadmap\n\n- [ ] Add Nuxt 2 support\n- [ ] Add more tests\n- [ ] Add SVGO support\n\n## Install\n\n```bash\nnpm i unplugin-svg-transformer -D\n# or\npnpm install unplugin-svg-transformer -D\n# or\nyarn add unplugin-svg-transformer -D\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport svgTransformer from \"unplugin-svg-transformer/vite\";\n\nexport default defineConfig({\n  plugins: [\n    svgTransformer({\n      /* options */\n    }),\n  ],\n});\n```\n\nExamples for Vue, React and Svelte:\n\n- [`live/vue3`](./live/vue3)\n- [`live/react`](./live/react)\n- [`live/svelte`](./live/svelte)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport svgTransformer from \"unplugin-svg-transformer/rollup\";\n\nexport default {\n  plugins: [\n    svgTransformer({\n      /* options */\n    }),\n  ],\n};\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require(\"unplugin-svg-transformer/webpack\")({\n      /* options */\n    }),\n  ],\n};\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  buildModules: [\n    \"unplugin-svg-transformer/nuxt\", // https://github.com/kiwilan/unplugin-svg-transformer\n  ],\n  svgTransformer: {\n    /* options */\n  },\n});\n```\n\n\u003e This module works for Nuxt 3 only\n\nExample: [`live/nuxt3`](./live/nuxt3)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require(\"unplugin-svg-transformer/webpack\")({\n        /* options */\n      }),\n    ],\n  },\n};\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from \"esbuild\";\nimport svgTransformer from \"unplugin-svg-transformer/esbuild\";\n\nbuild({\n  plugins: [\n    svgTransformer({\n      /* options */\n    }),\n  ],\n});\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Usage\n\n`unplugin-svg-transformer` works with any framework with Vite/Webpack, but some components are ready-to-use for Vue and React. You could also create your own component for your favorite framework (only Javascript, TypeScript, Vue 3, React, Svelte and Nuxt 3 have been tested).\n\n### Options\n\n\u003e **Note**\n\u003e\n\u003e Nuxt 3 have some built-in options defined statically, because it uses amazing Nuxt 3 features. If ✅ option is available, otherwise is static.\n\n|           Name           |          Type           |                                         Description                                          |                    Default                     |       Nuxt        |\n| :----------------------: | :---------------------: | :------------------------------------------------------------------------------------------: | :--------------------------------------------: | :---------------: |\n|        `cacheDir`        |        `string`         |                         SVG files will be added to cache directory.                          | `./node_modules/unplugin-svg-components/cache` |  `./.nuxt/icons`  |\n|        `fallback`        |        `string`         |                       Default SVG displayed when the SVG is not found.                       |                `\u003csvg\u003e...\u003c/svg\u003e`                |        ✅         |\n|         `global`         |        `boolean`        |                    Create `icons.d.ts` file at the root of your project.                     |                    `false`                     |                   |\n|       `libraryDir`       |        `string`         |                         Directory where `icons.ts` will be created.                          |                    `./src`                     |     `./.nuxt`     |\n|         `svgDir`         |        `string`         |                         Directory where your SVG files are located.                          |                  `./src/svg`                   | ✅ `./assets/svg` |\n|    `svg.classDefault`    |       `string[]`        |                               Add default classes to all SVG.                                |                  `undefined`                   |        ✅         |\n|     `svg.clearSize`      | `all`, `parent`, `none` | Clear `width` and `height` attributes from SVG (can be all, just parent on `\u003csvg\u003e` or none). |                     `none`                     |        ✅         |\n|     `svg.clearClass`     | `all`, `parent`, `none` |             Clear classes from SVG (can be all, just parent on `\u003csvg\u003e` or none).             |                     `none`                     |        ✅         |\n|     `svg.clearStyle`     | `all`, `parent`, `none` |          Clear inline styles from SVG (can be all, just parent on `\u003csvg\u003e` or none).          |                     `none`                     |        ✅         |\n|    `svg.currentColor`    |        `boolean`        |               Add `fill=\"currentColor\"` or `stroke=\"currentColor\"` to all SVG.               |                    `false`                     |        ✅         |\n| `svg.inlineStyleDefault` |       `string[]`        |                             Add default inline style to all SVG.                             |                  `undefined`                   |        ✅         |\n|    `svg.sizeInherit`     |        `boolean`        |                     Add inline style `height: inherit; width: inherit;`.                     |                    `false`                     |        ✅         |\n|       `svg.title`        |        `boolean`        |                                   Add title to SVG string.                                   |                    `false`                     |        ✅         |\n|        `useTypes`        |        `boolean`        |               Use types, if you want to use JavaScript instead of TypeScript.                |                     `true`                     |      `true`       |\n|        `warning`         |        `boolean`        |                         Trigger a warning when the SVG is not found.                         |                    `false`                     |        ✅         |\n\n### Add your SVG files\n\nIn plugin options, you can add a directory to watch SVG files: `svgDir`. By default, it's `./src/svg` (for Nuxt 3, it's `./assets/svg`). Just put your SVG files into this directory and they will be parsed and added to library file, `icons.ts`.\n\n\u003e **Note**\n\u003e\n\u003e You can use SVG nested directories, but you can't have two SVG files with the same name.\n\nAn example of `svgDir` directory:\n\n```bash\n├── src\n│   ├── svg\n│   │   ├── download.svg\n│   │   ├── social\n│   │   │   └── twitter.svg\n│   │   └── vite.svg\n│   └── ...\n└── ...\n```\n\nThis example will give you this list: `['download', 'social/twitter', 'vite']`.\n\n### Library file\n\nIn plugin options, you can add a directory to choose where to create library file: `libraryDir`. By default, it's `./src` (for Nuxt 3, it's `./.nuxt`). A library file will be created, `icons.ts` (or `icons.js` if `useTypes` is set to `false`), into this directory. This file will list all SVG files, used by `importSvg` function.\n\nWith TypeScript, `SvgName` type is available. And with JavaScript or TypeScript, you can use `svgList` and `importSvg` function. SVG list is updated when you add, remove or update a SVG file.\n\n\u003e **Note**\n\u003e\n\u003e A symlink of this file will be created into `unplugin-svg-transformer/icons`.\n\nAn example of `icons.ts` file:\n\n```ts\nexport type SvgName = \"download\" | \"social/twitter\" | \"vite\" | \"default\";\nexport const options = {...};\nexport const svgList: Record\u003cSvgName, () =\u003e Promise\u003c{ default: string }\u003e\u003e = {\n  download: () =\u003e import(\".../cache/download\"),\n  \"social/twitter\": () =\u003e import(\".../cache/social/twitter\"),\n  vite: () =\u003e import(\".../cache/vite\"),\n  default: () =\u003e import(\".../cache/default\"),\n};\n\nexport async function importSvg(name: SvgName): Promise\u003cstring\u003e {\n  // ...\n}\n\nif (typeof window !== \"undefined\") {\n  window.ust.options = options;\n  window.ust.svgList = svgList;\n  window.ust.importSvg = importSvg;\n}\n```\n\n### Import SVG\n\nYou can easily import a SVG file with `importSvg` function from `unplugin-svg-transformer/icons` and use `SvgName` type (globally registered) to validate your SVG file name. `svgList` function list all SVG files, used by `importSvg` function.\n\n```ts\nimport type { SvgName } from \"unplugin-svg-transformer/icons\";\nimport { importSvg, options, svgList } from \"unplugin-svg-transformer/icons\";\n\n// `SvgName` type represents SVG file name\nconst icon: SvgName = \"svg-name\";\n// importSvg function is async, you can use `await` or `then` method\nconst icon = await importSvg(\"svg-name\");\n// or\nconst icon = \"\";\nimportSvg(\"svg-name\").then((svg) =\u003e {\n  icon = svg;\n});\n\nconst fallback = options.fallback; // All options are available\n```\n\nYou can use [`Window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) to access `svgList` and `importSvg` functions from `ust` (not SSR compatible).\n\n```ts\nconst svg = await window.ust.importSvg(\"svg-name\");\n```\n\n#### Ready-to-use components\n\nWith some frameworks, you don't have to create your own component, you can use ready-to-use components.\n\n\u003e **Warning**\n\u003e\n\u003e Assure you have import `unplugin-svg-transformer/icons` into `main.ts` or `app.ts` (or `app.js`) when you use ready-to-use components: `import 'unplugin-svg-transformer/icons'` (except for Nuxt). Why? Because ready-to-use components use `window` to access to `importSvg` function (of course for Nuxt 3, you don't have to import `unplugin-svg-transformer/icons` because component use `#icons` alias).\n\u003e\n\u003e ```ts\n\u003e // main.ts\n\u003e import \"unplugin-svg-transformer/icons\";\n\u003e ```\n\n- For Vue 3, you can use a plugin to register globally `SvgIcon` component with `SvgTransformerPlugin` from `unplugin-svg-transformer/vue` and use `SvgIcon` component directly. But you can just import `SvgIcon` component from `unplugin-svg-transformer/vue` and use `SvgIcon` component.\n- For React, you can import `SvgIcon` component from `unplugin-svg-transformer/react`.\n- For Nuxt 3, you have a globally registered `SvgIcon` component, you can use `SvgIcon` component directly. You have an alias to use easily icons: `#icons`, same as `unplugin-svg-transformer/icons`.\n\nAll ready-to-use components have a `name` prop, based on SVG file name. You can use `name` prop to validate SVG file name.\n\n| Prop name  | Prop type | Required |                          Prop description                           |\n| :--------: | :-------: | :------: | :-----------------------------------------------------------------: |\n|   `name`   | `SvgName` |    ✅    |                            SVG file name                            |\n|  `title`   | `string`  |          |                         Add `title` to SVG                          |\n| `reactive` | `boolean` |          | Add `watch` to update SVG if `name` update (not available on React) |\n\n#### Create your own component\n\n- For Svelte, no component available, you have to create your own, you can use example: [`./examples/svelte/src/lib/SvgIcon.svelte`](./examples/svelte/src/lib/SvgIcon.svelte).\n- For vanilla JS or TS, you can import `importSvg` function from `unplugin-svg-transformer/icons` to import SVG file.\n- For Vue or React, you can create your own component like with Svelte.\n\n### TypeScript or JavaScript\n\nTo use JavaScript only, set `useTypes` option to `false`, but this plugin is built for TypeScript first. You can use `SvgName` type to validate your SVG file name.\n\n```ts\nimport type { SvgName } from \"unplugin-svg-transformer/icons\";\n\nconst icon: SvgName = \"svg-name\";\n```\n\nIf you use only JavaScript you can import your SVG with same way without type validation.\n\n#### Global type\n\nIf you use Vite (with Vue, React or Svelte) or Nuxt, `SvgName` is globally imported by default. But if you use another bundler or vanilla JS/TS and you want to globally import `SvgName`, you can add `global` option to `true` in plugin options to create `icons.d.ts` at root of project to add `SvgName` globally. You might have to add `include: [\"icons.d.ts\"]` into `tsconfig.json`.\n\n\u003e **Note**\n\u003e\n\u003e With Vue, React and Svelte, this plugin use `vite-env.d.ts` to add `SvgName` globally, `global` option is not needed (same for Nuxt).\n\n```jsonc\n// tsconfig.json, if you enabled `global` option.\n{\n  \"include\": [\"icons.d.ts\"]\n}\n```\n\nAnd enable `global` option in plugin options.\n\n```ts\n// vite.config.ts (or webpack.config.js, rollup.config.js, ...)\nimport svgTransformer from \"unplugin-svg-transformer/vite\";\n\nexport default defineConfig({\n  plugins: [\n    svgTransformer({\n      global: true,\n    }),\n  ],\n});\n```\n\n### Advanced examples\n\n#### Vue 3\n\nAn example with Vue 3 and Vite.\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see example\u003c/summary\u003e\u003cbr\u003e\n\nYou can skip `SvgTransformerPlugin` registration, this plugin will only load `SvgIcon` component globally, you can import `SvgIcon` component from `unplugin-svg-transformer/vue` and use `SvgIcon` component. But you have to import `unplugin-svg-transformer/icons` in `main.ts` if you want to use `SvgIcon` component.\n\n```diff\n// main.ts\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\n+import { SvgTransformerPlugin } from 'unplugin-svg-transformer/vue'\n+import \"unplugin-svg-transformer/icons\";\n\ncreateApp(App)\n+ .use(SvgTransformerPlugin)\n  .mount(\"#app\");\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n#### Inertia\n\nAn example with [Laravel Jetstream](https://jetstream.laravel.com/) ([Inertia](https://inertiajs.com/)) and Vite. This example will use TypeScript, but it works with JavaScript. For TypeScript, you will have to create `tsconfig.json` file at root of project, here a [example](https://gist.github.com/ewilan-riviere/616dc2bb9da36e4ed77068628719a00a).\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see example\u003c/summary\u003e\u003cbr\u003e\n\n\u003e **Note**\n\u003e\n\u003e This example use Vue 3, but it works with React or Svelte.\n\nTo use TypeScript, update `vite.config.js` to `vite.config.ts` and just add `unplugin-svg-transformer/vite` to `plugins` array.\n\n\u003e **Warning**\n\u003e\n\u003e Don't forget to replace `resources/js/app.js` to `resources/js/app.ts` into `laravel-vite-plugin` options.\n\n```diff\nimport { defineConfig } from \"vite\";\nimport laravel from \"laravel-vite-plugin\";\nimport vue from \"@vitejs/plugin-vue\";\n+import svgTransformer from \"unplugin-svg-transformer/vite\";\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      \"@\": \"/resources/js\",\n      \"~\": \"/\",\n    },\n  },\n  plugins: [\n    laravel({\n+     input: [\"resources/js/app.ts\"],\n      ssr: \"resources/js/ssr.js\",\n      refresh: true,\n    }),\n    vue({\n      template: {\n        transformAssetUrls: {\n          base: null,\n          includeAbsolute: false,\n        },\n      },\n    }),\n+   svgTransformer({\n+     svgDir: \"./resources/js/Svg\",\n+     libraryDir: \"./resources/js\",\n+     global: true,\n+   }),\n  ],\n});\n```\n\nJust replace `app.js` to `app.ts` into `resources/js` (and root Blade file).\n\n```diff\n// app.ts\nimport type { DefineComponent } from \"vue\";\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs/vue3\";\nimport { resolvePageComponent } from \"laravel-vite-plugin/inertia-helpers\";\n+import { SvgTransformerPlugin } from \"unplugin-svg-transformer/vue\";\n+import 'unplugin-svg-transformer/icons'\n\ncreateInertiaApp({\n  title: (title) =\u003e `${title} - App Name`,\n  resolve: (name) =\u003e\n    resolvePageComponent(\n      `./Pages/${name}.vue`,\n      import.meta.glob(\"./Pages/**/*.vue\")\n    ) as Promise\u003cDefineComponent\u003e,\n  setup({ el, App, props, plugin }) {\n    const app = createApp({ render: () =\u003e h(App, props) })\n      .use(plugin)\n+     .use(SvgTransformerPlugin);\n\n    app.mount(el);\n  },\n});\n```\n\nAnd you can use globally registered `SvgIcon` component.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cSvgIcon name=\"svg-name\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n#### React\n\nAn example with React and Vite.\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see example\u003c/summary\u003e\u003cbr\u003e\n\nYou have to import `unplugin-svg-transformer/icons` only once in `main.tsx` (or `app.tsx`), you can use `SvgIcon` component if you import it from `unplugin-svg-transformer/react`.\n\n```diff\n// main.tsx\nimport React from 'react'\nimport ReactDOM from 'react-dom/client'\n+import { SvgIcon } from 'unplugin-svg-transformer/react'\nimport './index.css'\n+import 'unplugin-svg-transformer/icons'\n\nconst root = document.getElementById('root') as HTMLElement\nReactDOM.createRoot(root).render(\n  \u003cReact.StrictMode\u003e\n    hello\n+   \u003cSvgIcon name=\"svg-name\" className='icon' /\u003e\n  \u003c/React.StrictMode\u003e,\n)\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n#### Nuxt 3\n\nAn example with Nuxt 3.\n\n\u003cdetails\u003e\n\u003csummary\u003eClick to see example\u003c/summary\u003e\u003cbr\u003e\n\nInstallation on Nuxt 3 is easily with `nuxt.config.ts` file.\n\n```ts\n// nuxt.config.ts\nimport { defineNuxtConfig } from \"nuxt3\";\n\nexport default defineNuxtConfig({\n  buildModules: [\n    \"unplugin-svg-transformer/nuxt\", //\n  ],\n  svgTransformer: {\n    /* options */\n  },\n});\n```\n\nAnd you can use globally registered `SvgIcon` component or `#icons` alias.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { importSvg } from \"#icons\"; // `#icons` alias\n\nconst svg = ref\u003cstring\u003e(\"\");\nimportSvg(\"svg-name\").then((icon) =\u003e {\n  svg.value = icon;\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-html=\"svg\" /\u003e\n    \u003cSvgIcon name=\"svg-name\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Testing\n\n```bash\npnpm test\n```\n\n### Local\n\n```bash\npnpm package\n```\n\nIn `package.json`:\n\n```json\n{\n  \"devDependencies\": {\n    \"unplugin-svg-transformer\": \"file:~/unplugin-svg-transformer.tgz\"\n  }\n}\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Credits\n\n- [UnJS](https://github.com/unjs): UnJS team for [`unplugin`](https://github.com/unjs/unplugin)\n- [`ewilan-riviere`](https://github.com/ewilan-riviere): author\n- [`antfu`](https://github.com/antfu/unplugin-starter): for the starter template, `@antfu/eslint-config` and his amazing work\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n[\u003cimg src=\"https://user-images.githubusercontent.com/48261459/201463225-0a5a084e-df15-4b11-b1d2-40fafd3555cf.svg\" height=\"120rem\" width=\"100%\" /\u003e](https://github.com/kiwilan)\n\n[unplugin-version-src]: https://img.shields.io/badge/dynamic/json?label=unplugin\u0026query=dependencies[%27unplugin%27]\u0026url=https://raw.githubusercontent.com/kiwilan/unplugin-svg-transformer/main/package.json\u0026style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[unplugin-version-href]: https://github.com/unjs/unplugin\n[version-src]: https://img.shields.io/npm/v/unplugin-svg-transformer.svg?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[version-href]: https://www.npmjs.com/package/unplugin-svg-transformer\n[downloads-src]: https://img.shields.io/npm/dm/unplugin-svg-transformer?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[downloads-href]: https://npmjs.com/package/unplugin-svg-transformer\n[license-src]: https://img.shields.io/github/license/kiwilan/unplugin-svg-transformer.svg?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[license-href]: https://github.com/kiwilan/unplugin-svg-transformer/blob/main/README.md\n[tests-src]: https://img.shields.io/github/actions/workflow/status/kiwilan/unplugin-svg-transformer/tests.yml?branch=main\u0026label=tests\u0026style=flat\u0026colorA=18181B\n[tests-href]: https://github.com/kiwilan/unplugin-svg-transformer/actions/workflows/tests.yml\n[codecov-src]: https://img.shields.io/codecov/c/gh/kiwilan/unplugin-svg-transformer/main?style=flat\u0026colorA=18181B\u0026colorB=F0DB4F\n[codecov-href]: https://codecov.io/gh/kiwilan/unplugin-svg-transformer\n[style-src]: https://antfu.me/badge-code-style.svg\n[style-href]: https://github.com/antfu/eslint-config\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiwilan%2Funplugin-svg-transformer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiwilan%2Funplugin-svg-transformer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiwilan%2Funplugin-svg-transformer/lists"}