{"id":13417277,"url":"https://github.com/unplugin/unplugin-icons","last_synced_at":"2025-05-13T15:06:27.596Z","repository":{"id":37045897,"uuid":"324073430","full_name":"unplugin/unplugin-icons","owner":"unplugin","description":"🤹 Access thousands of icons as components on-demand universally.","archived":false,"fork":false,"pushed_at":"2025-02-18T11:20:15.000Z","size":2879,"stargazers_count":4406,"open_issues_count":79,"forks_count":144,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-01T11:37:05.644Z","etag":null,"topics":["iconify","icons","jsx","nuxt","react","unplugin","vite","vue","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/unplugin-icons","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/unplugin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null},"funding":{"open_collective":"antfu","github":["antfu"]}},"created_at":"2020-12-24T05:26:15.000Z","updated_at":"2025-04-30T19:07:16.000Z","dependencies_parsed_at":"2023-09-02T11:59:28.459Z","dependency_job_id":"4fbdd871-3002-49cf-bb20-c7fbdcc1c706","html_url":"https://github.com/unplugin/unplugin-icons","commit_stats":{"total_commits":390,"total_committers":60,"mean_commits":6.5,"dds":"0.34615384615384615","last_synced_commit":"1746e407c182913bf7fdd64775446410d004b9e0"},"previous_names":["antfu/vite-plugin-icons","antfu/unplugin-icons"],"tags_count":109,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unplugin%2Funplugin-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unplugin","download_url":"https://codeload.github.com/unplugin/unplugin-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252089124,"owners_count":21692903,"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":["iconify","icons","jsx","nuxt","react","unplugin","vite","vue","webpack"],"created_at":"2024-07-30T22:00:34.836Z","updated_at":"2025-05-05T18:33:32.752Z","avatar_url":"https://github.com/unplugin.png","language":"TypeScript","readme":"# unplugin-icons\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-icons?color=a1b858\u0026label=)](https://www.npmjs.com/package/unplugin-icons)\n\nAccess thousands of icons as components **on-demand** universally.\n\n### Features\n\n- 🌏 Universal\n  - 🤹 **Any** icon sets - ~150 popular sets with over 200,000 icons, logos, emojis, etc. Powered by [Iconify](https://github.com/iconify/iconify).\n  - 📦 **Major** build tools - Vite, Webpack, Rollup, Nuxt, Rspack, etc. Powered by [unplugin](https://github.com/unjs/unplugin).\n  - 🚀 **Major** frameworks - Vanilla, Web Components, React, Vue 3, Vue 2, Solid, Svelte, and more. [Contribute](./src/core/compilers).\n  - 🍱 **Any** combinations of them!\n- ☁️ On-demand - Only bundle the icons you really use, while having all the options.\n- 🖨 SSR / SSG friendly - Ship the icons with your page, no more FOUC.\n- 🌈 Stylable - Change size, color, or even add animations as you would with styles and classes.\n- 📥 [Custom icons](#custom-icons) - load your custom icons to get universal integrations at ease.\n- 📲 [Auto Importing](#auto-importing) - Use icons as components directly in your template.\n- 🦾 TypeScript support.\n- 🔍 [Browse Icons](https://icones.js.org/)\n\n\u003ctable\u003e\u003ctr\u003e\u003ctd\u003e\u003cbr\u003e\n\n\u0026nbsp;\u0026nbsp;\u0026nbsp;💡 **Story behind this tool**: [Journey with Icons Continues](https://antfu.me/posts/journey-with-icons-continues) - a blog post by Anthony\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\n\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003e **`vite-plugin-icons` has been renamed to `unplugin-icons`**, see the [migration guide](#migrate-from-vite-plugin-icons)\n\n## Usage\n\nImport icons names with the convention `~icons/{collection}/{icon}` and use them directly as components. [Auto importing is also possible](#auto-importing).\n\n###### React\n\n```jsx\nimport IconAccessibility from '~icons/carbon/accessibility'\nimport IconAccountBox from '~icons/mdi/account-box'\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cIconAccessibility /\u003e\n      \u003cIconAccountBox style={{ fontSize: '2em', color: 'red' }} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n###### Vue\n\n```html\n\u003cscript setup\u003e\nimport IconAccessibility from '~icons/carbon/accessibility'\nimport IconAccountBox from '~icons/mdi/account-box'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cicon-accessibility/\u003e\n  \u003cicon-account-box style=\"font-size: 2em; color: red\"/\u003e\n\u003c/template\u003e\n```\n\n## Install\n\n### Plugin\n\n```bash\nnpm i -D unplugin-icons\n```\n\n### Icons Data\n\nWe use [Iconify](https://iconify.design/) as the icons data source (supports 100+ iconsets).\n\nYou have two ways to install them:\n\n###### Install Full Collection\n\n```bash\nnpm i -D @iconify/json\n```\n\n`@iconify/json` (~120MB) includes all the iconsets from Iconify so you can install once and use any of them as you want (only the icons you actually use will be bundle into the production build).\n\n###### Install by Icon Set\n\nIf you only want to use a few of the icon sets and don't want to download the entire collection, you can also install them individually with `@iconify-json/[collection-id]`.\nFor example, to install [Material Design Icons](https://icon-sets.iconify.design/mdi/), you can do:\n\n```bash\nnpm i -D @iconify-json/mdi\n```\n\nTo boost your workflow, it's also possible to let `unplugin-icons` handle that installation by enabling the `autoInstall` option.\n\n```ts\nIcons({\n  // experimental\n  autoInstall: true,\n})\n```\n\nIt will install the icon set when you import them. The right package manager will be auto-detected (`npm`, `yarn` or `pnpm`).\n\n## Examples\n\nYou can play online with the examples in this repo in StackBlitz, see [playgrounds page](./examples/README.md).\n\nFork any of the online examples and reproduce the issue you're facing, then share the link with us.\n\n## Configuration\n\n###### Build Tools\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport Icons from 'unplugin-icons/vite'\n\nexport default defineConfig({\n  plugins: [\n    Icons({ /* options */ }),\n  ],\n})\n```\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 Icons from 'unplugin-icons/rollup'\n\nexport default {\n  plugins: [\n    Icons({ /* options */ }),\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-icons/webpack').default({ /* options */ }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNuxt\u003c/summary\u003e\u003cbr\u003e\n\nNuxt 2 and [Nuxt Bridge](https://github.com/nuxt/bridge)\n\n```ts\n// nuxt.config.js\nexport default {\n  buildModules: [\n    ['unplugin-icons/nuxt', { /* options */ }],\n  ],\n}\n```\n\nNuxt 3\n\n```ts\n// nuxt.config.js\nexport default defineNuxtConfig({\n  modules: [\n    ['unplugin-icons/nuxt', { /* options */ }]\n  ],\n})\n```\n\nOr work with [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) resolvers\n\n```ts\nimport IconsResolver from 'unplugin-icons/resolver'\nimport ViteComponents from 'unplugin-vue-components/vite'\n\n// nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\n    'unplugin-icons/nuxt',\n  ],\n  vite: {\n    plugins: [\n      ViteComponents({\n        resolvers: [\n          IconsResolver({/* options */}),\n        ],\n      }),\n    ],\n  },\n})\n```\n\nSee [the Nuxt example](examples/nuxt3) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRspack\u003c/summary\u003e\n\n```ts\nimport Icons from 'unplugin-icons/rspack'\n\n// rspack.config.mjs\nexport default defineConfig({\n  plugins: [\n    // ...\n    Icons({/* options */}),\n  ]\n})\n```\n\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-icons/webpack').default({ /* options */ }),\n    ],\n  },\n}\n```\n\nYou can also rename the Vue configuration file to `vue.config.mjs` and use static import syntax (you should use latest `@vue/cli-service ^5.0.8`):\n```ts\n// vue.config.mjs\nimport Icons from 'unplugin-icons/webpack'\n\nexport default {\n  configureWebpack: {\n    plugins: [\n      Icons({ /* options */ }),\n    ],\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSvelteKit\u003c/summary\u003e\u003cbr\u003e\n\nThe `unplugin-icons` plugin should be configured in the `vite.config.js` configuration file:\n\n```ts\nimport { sveltekit } from '@sveltejs/kit/vite'\nimport Icons from 'unplugin-icons/vite'\n// vite.config.js\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    sveltekit(),\n    Icons({\n      compiler: 'svelte',\n    })\n  ]\n})\n```\n\nCheck instructions in the `Frameworks -\u003e Svelte` section below if you faced module import errors.\n\nSee [the SvelteKit example](examples/sveltekit) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSvelte + Vite\u003c/summary\u003e\u003cbr\u003e\n\nSvelte support requires the `@sveltejs/vite-plugin-svelte` plugin:\n```shell\nnpm i -D @sveltejs/vite-plugin-svelte\n```\n\nThe `unplugin-icons` plugin should be configured in the `vite.config.js` configuration file:\n\n```ts\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\nimport Icons from 'unplugin-icons/vite'\n// vite.config.js\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    svelte(),\n    Icons({\n      compiler: 'svelte',\n    }),\n  ],\n})\n```\n\nCheck instructions in the `Frameworks -\u003e Svelte` section below if you faced module import errors.\n\nSee [the Svelte + Vite example](examples/vite-svelte) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNext.js\u003c/summary\u003e\u003cbr\u003e\n\nThe `unplugin-icons` plugin should be configured on `next.config.js` configuration file:\n```ts\n// next.config.js\n/** @type {import('next').NextConfig} */\nmodule.exports = {\n  reactStrictMode: true,\n  webpack(config) {\n    config.plugins.push(\n      require('unplugin-icons/webpack').default({\n        compiler: 'jsx',\n        jsx: 'react'\n      })\n    )\n\n    return config\n  },\n}\n```\n\nYou can also rename the Next configuration file to `next.config.mjs` and use static import syntax:\n```ts\n// next.config.mjs\nimport Icons from 'unplugin-icons/webpack'\n\n/** @type {import('next').NextConfig} */\nexport default {\n  reactStrictMode: true,\n  webpack(config) {\n    config.plugins.push(\n      Icons({\n        compiler: 'jsx',\n        jsx: 'react'\n      })\n    )\n\n    return config\n  }\n}\n```\n\nCheck instructions in the `Frameworks -\u003e React` section below if you faced module import errors.\n\n⚠️ **Warning:** to import an icon is necessary to explicitly add the `.jsx` extension to the import path, so that Next.js knows how to load it, by example:\n\n\u003c!-- eslint-skip --\u003e\n\n```ts\nimport IconArrowRight from '~icons/dashicons/arrow-right.jsx';\n                                                     // ^-- write `.jsx` to avoid\n                                                     // https://github.com/antfu/unplugin-icons/issues/103\n// ...some code later\n\u003cIconArrowRight /\u003e\n```\n\nSee [the Next.js example](examples/next) for a working example project.\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 Icons from 'unplugin-icons/esbuild'\n\nbuild({\n  /* ... */\n  plugins: [\n    Icons({\n      /* options */\n    }),\n  ],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAstro\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// astro.config.mjs\nimport { defineConfig } from 'astro/config'\nimport Icons from 'unplugin-icons/vite'\n\n// https://astro.build/config\nexport default defineConfig({\n  vite: {\n    plugins: [\n      Icons({\n        compiler: 'astro',\n      }),\n    ],\n  },\n})\n```\n\nSee [the Astro example](examples/astro) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAstro + Vue\u003c/summary\u003e\u003cbr\u003e\n\nRequired [@astrojs/vue](https://docs.astro.build/es/guides/integrations-guide/vue/) installed.\n\n```ts\nimport Vue from '@astrojs/vue'\n// astro.config.mjs\nimport { defineConfig } from 'astro/config'\nimport Icons from 'unplugin-icons/vite'\n\n// https://astro.build/config\nexport default defineConfig({\n  integrations: [\n    Vue(),\n  ],\n  vite: {\n    plugins: [\n      Icons({\n        compiler: 'vue3',\n      }),\n    ],\n  },\n})\n```\n\nSee [the Astro + Vue example](examples/astro-vue) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n###### Frameworks\n\n\u003cdetails\u003e\n\u003csummary\u003eVue 3 / Vue 2.7+\u003c/summary\u003e\u003cbr\u003e\n\nVue 3 / Vue 2.7+ support requires peer dependency `@vue/compiler-sfc`:\n\n```bash\nnpm i -D @vue/compiler-sfc\n```\n\n```ts\nIcons({ compiler: 'vue3' })\n```\n\nType Declarations\n\n\u003c!-- eslint-skip --\u003e\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/vue\",\n    ]\n  }\n}\n```\n\nSee [the Vue 3 example](examples/vite-vue3) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue 2 (only for versions \u003c 2.7)\u003c/summary\u003e\u003cbr\u003e\n\nVue 2 support requires peer dependency `vue-template-compiler`:\n\n```bash\nnpm i -D vue-template-compiler\n```\n\n```ts\nIcons({ compiler: 'vue2' })\n```\n\nType Declarations\n\n\u003c!-- eslint-skip --\u003e\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/vue\",\n    ]\n  }\n}\n```\n\nSee [the Vue 2 example](examples/vite-vue2) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eReact\u003c/summary\u003e\u003cbr\u003e\n\nJSX support requires peer dependency `@svgr/core` and its plugin `@svgr/plugin-jsx`:\n\n```bash\nnpm i -D @svgr/core @svgr/plugin-jsx\n```\n\n```ts\nIcons({ compiler: 'jsx', jsx: 'react' })\n```\n\nType Declarations\n\n\u003c!-- eslint-skip --\u003e\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/react\",\n    ]\n  }\n}\n```\n\nSee [the React example](examples/vite-react) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003ePreact\u003c/summary\u003e\u003cbr\u003e\n\nJSX support requires peer dependency `@svgr/core` and its plugin `@svgr/plugin-jsx`:\n\n```bash\nnpm i -D @svgr/core @svgr/plugin-jsx\n```\n\n```ts\nIcons({ compiler: 'jsx', jsx: 'preact' })\n```\n\nType Declarations\n\n\u003c!-- eslint-skip --\u003e\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/preact\",\n    ]\n  }\n}\n```\n\nSee [the Preact example](examples/vite-preact) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSolid\u003c/summary\u003e\u003cbr\u003e\n\n```ts\nIcons({ compiler: 'solid' })\n```\n\nType Declarations\n\n\u003c!-- eslint-skip --\u003e\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/solid\",\n    ]\n  }\n}\n```\n\nSee [the Solid example](examples/vite-solid) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eSvelte\u003c/summary\u003e\u003cbr\u003e\n\n```ts\nIcons({ compiler: 'svelte' })\n```\n\nType Declarations\n\nFor SvelteKit, in the `src/app.d.ts` file:\n\n```ts\nimport 'unplugin-icons/types/svelte'\n```\n\nFor Svelte + Vite, in the `src/vite-env.d.ts` file:\n\n```js\n/// \u003creference types=\"svelte\" /\u003e\n/// \u003creference types=\"vite/client\" /\u003e\n/// \u003creference types=\"unplugin-icons/types/svelte\" /\u003e\n```\n\nIf you're still using Svelte 4, replace the reference to use Svelte 4:\n```js\n/// \u003creference types=\"svelte\" /\u003e\n/// \u003creference types=\"vite/client\" /\u003e\n/// \u003creference types=\"unplugin-icons/types/svelte4\" /\u003e\n```\n\nIf you're still using Svelte 3, replace the reference to use Svelte 3:\n```js\n/// \u003creference types=\"svelte\" /\u003e\n/// \u003creference types=\"vite/client\" /\u003e\n/// \u003creference types=\"unplugin-icons/types/svelte3\" /\u003e\n```\n\nSee [the Svelte example](examples/vite-svelte) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAstro\u003c/summary\u003e\u003cbr\u003e\n\nType Declarations\n\n\u003c!-- eslint-skip --\u003e\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/astro\",\n    ]\n  }\n}\n```\n\nSee [the Astro example](examples/astro) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eAstro + Vue\u003c/summary\u003e\u003cbr\u003e\n\nOnly the Vue type declarations are required:\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/vue\"\n    ]\n  }\n}\n```\n\nSee [the Astro + Vue example](examples/astro-vue) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eQwik\u003c/summary\u003e\u003cbr\u003e\n\nQwik support requires peer dependency `@svgx/core`:\n\n```bash\nnpm i -D @svgx/core\n```\n\n```ts\nIcons({ compiler: 'qwik' })\n```\n\nAlternatively, you can use `jsx` compiler, requires peer dependency `@svgr/core` and its plugin `@svgr/plugin-jsx`:\n```bash\nnpm i -D @svgr/core @svgr/plugin-jsx\n```\n\n```ts\nIcons({ compiler: 'jsx', jsx: 'qwik' })\n```\n\nType Declarations\n\n\u003c!-- eslint-skip --\u003e\n\n```jsonc\n// tsconfig.json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"unplugin-icons/types/qwik\",\n    ]\n  }\n}\n```\n\nSee [the Qwik example](examples/vite-qwik) for a working example project.\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Use RAW compiler from query params\n\nFrom `v0.13.2` you can also use `raw` compiler to access the `svg` icon and use it on your html templates, just add `raw` to the icon query param.\n\nFor example, using `vue3`:\n\n```vue\n\u003cscript setup lang='ts'\u003e\nimport RawMdiAlarmOff from '~icons/mdi/alarm-off?raw\u0026width=4em\u0026height=4em'\nimport RawMdiAlarmOff2 from '~icons/mdi/alarm-off?raw\u0026width=1em\u0026height=1em'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- raw example --\u003e\n  \u003cpre\u003e\n    import RawMdiAlarmOff from '~icons/mdi/alarm-off?raw\u0026width=4em\u0026height=4em'\n    {{ RawMdiAlarmOff }}\n    import RawMdiAlarmOff2 from '~icons/mdi/alarm-off?raw\u0026width=1em\u0026height=1em'\n    {{ RawMdiAlarmOff2 }}\n  \u003c/pre\u003e\n  \u003c!-- svg example --\u003e\n  \u003cspan v-html=\"RawMdiAlarmOff\" /\u003e\n  \u003cspan v-html=\"RawMdiAlarmOff2\" /\u003e\n\u003c/template\u003e\n```\n\n## Custom Icons\n\nFrom `v0.11`, you can now load your own icons!\n\nFrom `v0.13` you can also provide a transform callback to `FileSystemIconLoader`.\n\n```ts\nimport { promises as fs } from 'node:fs'\n\n// loader helpers\nimport { FileSystemIconLoader } from 'unplugin-icons/loaders'\n\nIcons({\n  customCollections: {\n    // key as the collection name\n    'my-icons': {\n      account: '\u003csvg\u003e\u003c!-- ... --\u003e\u003c/svg\u003e',\n      // load your custom icon lazily\n      settings: () =\u003e fs.readFile('./path/to/my-icon.svg', 'utf-8'),\n      /* ... */\n    },\n    'my-other-icons': async (iconName) =\u003e {\n      // your custom loader here. Do whatever you want.\n      // for example, fetch from a remote server:\n      return await fetch(`https://example.com/icons/${iconName}.svg`).then(res =\u003e res.text())\n    },\n    // a helper to load icons from the file system\n    // files under `./assets/icons` with `.svg` extension will be loaded as it's file name\n    // you can also provide a transform callback to change each icon (optional)\n    'my-yet-other-icons': FileSystemIconLoader(\n      './assets/icons',\n      svg =\u003e svg.replace(/^\u003csvg /, '\u003csvg fill=\"currentColor\" '),\n    ),\n  },\n})\n```\n\nThen use as\n\n```ts\nimport IconAccount from '~icons/my-icons/account'\nimport IconFoo from '~icons/my-other-icons/foo'\nimport IconBar from '~icons/my-yet-other-icons/bar'\n```\n\n\u003e 💡 SVG Authoring Tips:\n\u003e - To make your icons color adaptable, set `fill=\"currentColor\"` or `stroke=\"currentColor\"` in your SVG.\n\u003e - Leave the `height` and `width` unspecified, we will set them for you.\n\n### Use with Resolver\n\nWhen using resolvers for auto-importing, you will need to tell it your custom collection names:\n\n```ts\nIconResolver({\n  customCollections: [\n    'my-icons',\n    'my-other-icons',\n    'my-yet-other-icons',\n  ],\n})\n```\n\nSee the [Vue 3 + Vite example](./examples/vite-vue3/vite.config.ts).\n\n### Use Custom External Collection Packages\n\nFrom version `v0.18.3` you can use other packages to load icons from others authors.\n\n**WARNING**: external packages must include `icons.json` file with the `icons` data in `IconifyJSON` format, which can be exported with Iconify Tools. Check [Exporting icon set as JSON package](https://iconify.design/docs/libraries/tools/export/json-package.html) for more details.\n\nFor example, you can use `an-awesome-collection` or `@my-awesome-collections/some-collection` to load your custom or third party icons:\n```ts\n// loader helpers\nimport { ExternalPackageIconLoader } from 'unplugin-icons/loaders'\n\nIcons({ customCollections: ExternalPackageIconLoader('my-awesome-collection') })\n```\n\nWhen using with resolvers for auto-importing, remember you will need to tell it your custom collection names:\n```ts\nIconResolver({\n  customCollections: [\n    'my-awesome-collection',\n  ],\n})\n```\n\nYou can also combine it with `FileSystemIconLoader` or with other custom icon loaders:\n```ts\n// loader helpers\nimport { ExternalPackageIconLoader, FileSystemIconLoader } from 'unplugin-icons/loaders'\n\nIcons({\n  customCollections: {\n    ...ExternalPackageIconLoader('an-awesome-collection'),\n    ...ExternalPackageIconLoader('@my-awesome-collections/some-collection'),\n    ...ExternalPackageIconLoader('@my-awesome-collections/some-other-collection'),\n    'my-yet-other-icons': FileSystemIconLoader(\n      './assets/icons',\n      svg =\u003e svg.replace(/^\u003csvg /, '\u003csvg fill=\"currentColor\" '),\n    ),\n  },\n})\n```\n\nSee the [Vue 3 + Vite example](./examples/vite-vue3/vite.config.ts).\n\n## Icon customizer\n\nFrom `v0.13` you can also customize each icon using `iconCustomizer` configuration option or using query params when importing them.\n\nThe `query` param will take precedence over `iconCustomizer` and `iconCustomizer` over `configuration`.\n\nThe `iconCustomizer` and `query` params will be applied to any collection, that is, for each icon from `custom` loader, `inlined` on `customCollections` or from `@iconify`.\n\nFor example, you can configure `iconCustomizer` to change all icons for a collection or individual icons on a collection:\n\n```ts\nimport { promises as fs } from 'node:fs'\n\n// loader helpers\nimport { FileSystemIconLoader } from 'unplugin-icons/loaders'\n\nIcons({\n  customCollections: {\n    // key as the collection name\n    'my-icons': {\n      account: '\u003csvg\u003e\u003c!-- ... --\u003e\u003c/svg\u003e',\n      // load your custom icon lazily\n      settings: () =\u003e fs.readFile('./path/to/my-icon.svg', 'utf-8'),\n      /* ... */\n    },\n    'my-other-icons': async (iconName) =\u003e {\n      // your custom loader here. Do whatever you want.\n      // for example, fetch from a remote server:\n      return await fetch(`https://example.com/icons/${iconName}.svg`).then(res =\u003e res.text())\n    },\n    // a helper to load icons from the file system\n    // files under `./assets/icons` with `.svg` extension will be loaded as it's file name\n    // you can also provide a transform callback to change each icon (optional)\n    'my-yet-other-icons': FileSystemIconLoader(\n      './assets/icons',\n      svg =\u003e svg.replace(/^\u003csvg /, '\u003csvg fill=\"currentColor\" '),\n    ),\n  },\n  iconCustomizer(collection, icon, props) {\n    // customize all icons in this collection\n    if (collection === 'my-other-icons') {\n      props.width = '4em'\n      props.height = '4em'\n    }\n    // customize this icon in this collection\n    if (collection === 'my-icons' \u0026\u0026 icon === 'account') {\n      props.width = '6em'\n      props.height = '6em'\n    }\n    // customize this @iconify icon in this collection\n    if (collection === 'mdi' \u0026\u0026 icon === 'account') {\n      props.width = '2em'\n      props.height = '2em'\n    }\n  },\n})\n```\n\nor you can use `query` params to apply to individual icons:\n\n\u003c!-- eslint-skip --\u003e\n\n```vue\n\u003cscript setup lang='ts'\u003e\nimport MdiAlarmOff from 'virtual:icons/mdi/alarm-off?width=4em\u0026height=4em'\nimport MdiAlarmOff2 from 'virtual:icons/mdi/alarm-off?width=1em\u0026height=1em'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003c!-- width=4em and height=4em --\u003e\n  \u003cmdi-alarm-off /\u003e\n  \u003c!-- width=4em and height=4em --\u003e\n  \u003cMdiAlarmOff /\u003e\n  \u003c!-- width=1em and height=1em --\u003e\n  \u003cMdiAlarmOff2 /\u003e\n\u003c/template\u003e\n```\n\nSee `src/App.vue` component and `vite.config.ts` configuration on `vite-vue3` example project.\n\n## Global Custom Icon Transformation\n\nFrom version `0.14.2`, when loading your custom icons, you can transform them, for example adding `fill` attribute with `currentColor`:\n```ts\nIcons({\n  customCollections: {\n    // key as the collection name\n    'my-icons': {\n      account: '\u003csvg\u003e\u003c!-- ... --\u003e\u003c/svg\u003e',\n      /* ... */\n    },\n  },\n  transform(svg, collection, icon) {\n    // apply fill to this icon on this collection\n    if (collection === 'my-icons' \u0026\u0026 icon === 'account')\n      return svg.replace(/^\u003csvg /, '\u003csvg fill=\"currentColor\" ')\n\n    return svg\n  },\n})\n```\n\n## Advanced Custom Icon Set Cleanup\n\nWhen using this plugin with your custom icons, consider using a cleanup process similar to that done by [Iconify](https://iconify.design/) for any icons sets. All the tools you need are available in [Iconify Tools](https://docs.iconify.design/tools/tools2/).\n\nYou can check this repo, using `unplugin-icons` on a `SvelteKit` project: https://github.com/iconify/tools/tree/main/%40iconify-demo/unplugin-svelte.\n\nRead [Cleaning up icons](https://docs.iconify.design/articles/cleaning-up-icons/) article from [Iconify](https://iconify.design/) for more details.\n\n## Migrate from `vite-plugin-icons`\n\n`package.json`\n\n```diff\n{\n  \"devDependencies\": {\n-   \"vite-plugin-icons\": \"*\",\n+   \"unplugin-icons\": \"^0.7.0\",\n  }\n}\n```\n\n`vite.config.js`\n\n```diff\nimport Components from 'unplugin-vue-components/vite'\n- import Icons, { ViteIconsResolver } from 'vite-plugin-icons'\n+ import Icons from 'unplugin-icons/vite'\n+ import IconsResolver from 'unplugin-icons/resolver'\n\nexport default {\n  plugins: [\n    Vue(),\n    Components({\n      resolvers: [\n        IconsResolver()\n      ],\n    }),\n    Icons(),\n  ],\n}\n```\n\n`*` - imports usage\n\n```diff\n- import IconComponent from 'virtual:vite-icons/collection/name'\n+ import IconComponent from '~icons/collection/name'\n```\n\n\u003e You can still use `virtual:icons` prefix in Vite if you prefer, but it's not yet supported in Webpack, we are unifying it as a workaround in the docs.\n\n## Options\n\nYou can set default styling for all icons.\nThe following config shows the default values of each option:\n\n```ts\nIcons({\n  scale: 1.2, // Scale of icons against 1em\n  defaultStyle: '', // Style apply to icons\n  defaultClass: '', // Class names apply to icons\n  compiler: null, // 'vue2', 'vue3', 'jsx'\n  jsx: 'react', // 'react' or 'preact'\n})\n```\n\n## Auto Importing\n\n\u003cdetails\u003e\n\u003csummary\u003eVue 2 \u0026 3\u003c/summary\u003e\u003cbr\u003e\n\nUse with [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components)\n\nFor example in Vite:\n\n```js\n// vite.config.js\nimport Vue from '@vitejs/plugin-vue'\nimport IconsResolver from 'unplugin-icons/resolver'\nimport Icons from 'unplugin-icons/vite'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default {\n  plugins: [\n    Vue(),\n    Components({\n      resolvers: [\n        IconsResolver(),\n      ],\n    }),\n    Icons(),\n  ],\n}\n```\n\nThen you can use any icons as you want without explicit importing. Only the used icons will be bundled.\n\n```html\n\u003ctemplate\u003e\n  \u003ci-carbon-accessibility/\u003e\n  \u003ci-mdi-account-box style=\"font-size: 2em; color: red\"/\u003e\n\u003c/template\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eReact \u0026 Solid\u003c/summary\u003e\u003cbr\u003e\n\nUse with [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import)\n\nFor example in Vite:\n\n```js\nimport AutoImport from 'unplugin-auto-import/vite'\nimport IconsResolver from 'unplugin-icons/resolver'\n// vite.config.js\nimport Icons from 'unplugin-icons/vite'\n\nexport default {\n  plugins: [\n    /* ... */\n    AutoImport({\n      resolvers: [\n        IconsResolver({\n          prefix: 'Icon',\n          extension: 'jsx',\n        }),\n      ],\n    }),\n    Icons({\n      compiler: 'jsx', // or 'solid'\n    }),\n  ],\n}\n```\n\nThen you can use any icons with the prefix `Icon` as you want without explicit importing. Type declarations will be generated on the fly.\n\n\u003c!-- eslint-disable react/jsx-no-undef --\u003e\n\n```js\nexport function Component() {\n  return (\n    \u003cdiv\u003e\n      \u003cIconCarbonApps /\u003e\n      \u003cIconMdiAccountBox style=\"font-size: 2em; color: red\" /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\u003c/details\u003e\n\n### Name Conversion\n\nWhen using component resolver, you have to follow the name conversion for icons to be properly inferred.\n\n```\n{prefix}-{collection}-{icon}\n```\n\nThe `collection` field follows [Iconify's collection IDs](https://iconify.design/icon-sets/).\n\nBy default, the prefix is set to `i` while you can customize via config\n\n```ts\nIconsResolver({\n  prefix: 'icon', // \u003c--\n})\n```\n\n```html\n\u003ctemplate\u003e\n  \u003cicon-mdi-account /\u003e\n\u003c/template\u003e\n```\n\nNon-prefix mode is also supported\n\n```ts\nIconsResolver({\n  prefix: false, // \u003c--\n  // this is optional, default enabling all the collections supported by Iconify\n  enabledCollections: ['mdi'],\n})\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cmdi-account /\u003e\n\u003c/template\u003e\n```\n\n### Collection Aliases\n\nWhen using component resolver, you have to use the name of the collection that can be long or redundant: for example,\nwhen using `icon-park` collection you need to use it like this `\u003cicon-icon-park-abnormal /\u003e`.\n\nYou can add an alias for any collection to the `IconResolver` plugin:\n\n```ts\nIconsResolver({\n  alias: {\n    park: 'icon-park',\n    fas: 'fa-solid',\n    // ...\n  }\n})\n```\n\nYou can use the alias or the collection name, the plugin will resolve both.\n\nFollowing with the example and configuring the plugin with previous `alias` entry, you can now use\n`\u003cicon-park-abnormal /\u003e` or `\u003cicon-icon-park-abnormal /\u003e`.\n\n## Sponsors\n\nThis project is part of my \u003ca href='https://github.com/antfu-sponsors'\u003eSponsor Program\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT](./LICENSE) License © 2020-PRESENT [Anthony Fu](https://github.com/antfu)\n","funding_links":["https://opencollective.com/antfu","https://github.com/sponsors/antfu"],"categories":["Plugins","TypeScript","UI Components","Recently Updated","webpack","Resources"],"sub_categories":["Framework-agnostic Plugins","Unplugin","Icons","[Oct 27, 2024](/content/2024/10/27/README.md)","Truly awesome projects"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funplugin%2Funplugin-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funplugin%2Funplugin-icons/lists"}