unplugin/unplugin-icons

🤹 Access thousands of icons as components on-demand universally.

unplugin-icons's Issues

Add icons dynamically

Hi, awesome work with this plugins man, enjoying a lot playing around with vueuse and this one.

Which would be the approach to dynamically insert icons? Let's say I have a menu metadata in a js object and icon is one of the properties.

One option I guess would be to use <component :is="menuitem.icon"> where icon: IconAccountBox .

Would make sense to add a component <icon :name="carbon-icon" /> to the repo?

Clean symbols

It would be nice to be able to automatically clean some attributes making CSS styling more difficult.

For example (we currently use svgstore):

{
  cleanSymbols: ['stroke', 'fill'],
}

Input:

<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.48 11C20.7851 10.621 3.47885 0.806646 3.47885 0.806646C2.81248 0.443169 2 0.925483 2 1.68454V8.65973C2 9.69991 2.79733 10.5664 3.83391 10.6528L13.5017 11.4585C13.7834 11.4819 14 11.7174 14 12V12C14 12.2826 13.7834 12.5181 13.5017 12.5415L3.83391 13.3472C2.79732 13.4336 2 14.3001 2 15.3403V22.3155C2 23.0745 2.81248 23.5568 3.47885 23.1934C3.47885 23.1934 20.7851 13.379 21.48 13C22.1749 12.621 22.1749 11.379 21.48 11Z" fill="black"/>
</svg>

Output:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M21.48 11C20.7851 10.621 3.47885 0.806646 3.47885 0.806646C2.81248 0.443169 2 0.925483 2 1.68454V8.65973C2 9.69991 2.79733 10.5664 3.83391 10.6528L13.5017 11.4585C13.7834 11.4819 14 11.7174 14 12V12C14 12.2826 13.7834 12.5181 13.5017 12.5415L3.83391 13.3472C2.79732 13.4336 2 14.3001 2 15.3403V22.3155C2 23.0745 2.81248 23.5568 3.47885 23.1934C3.47885 23.1934 20.7851 13.379 21.48 13C22.1749 12.621 22.1749 11.379 21.48 11Z"/>
</svg>

Vite + React build fails

vite.config.ts

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import tsconfigPaths from 'vite-tsconfig-paths'
import Icons from 'unplugin-icons/vite'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    reactRefresh(),
    tsconfigPaths(),
    Icons({ compiler: 'jsx', jsx: 'react' }),
    visualizer()
  ]
})

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "types": ["unplugin-icons/types/react"]
  },
  "include": ["./src"]
}

TS issue - Ambient module declaration cannot specify relative module name

Things are ok during development but I'm running into this issue when running vue-tsc --noEmit (as part of my build script).

I'm getting this issue:

node_modules/vite-plugin-icons/client.d.ts:9:16 - error TS2436: Ambient module declaration cannot specify relative module name.

9 declare module '/@vite-icons/*' {

It appears the TS compiler does not like declaring a module name starting with a "/"

Any ideas what's going on?

My tsconfig file:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "baseUrl": "./",
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client", "node"],
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "include": [
    "**/*.ts",
    "**/*.js",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}

Vue 3 - CLI Example

Can you please provide an example project that is built using the vue cli with vue 3?

I tried using the vue 2 cli as a guide but I was unsuccessful because of

This dependency was not found:
* ~icons/mdi/account-box in ....

除了这样修改style="font-size: 2em; color: red"还有其他方式么，小白请教

style="font-size: 2em; color: red"
请问除了这种方式修改样式，还有其他方式吗

dynamic icons?

Say you have const providers = ref(['google','facebook']) and what to load icons based on the names. How could you do that with this library? For static icons its working great!

Next.js - You may need an additional loader

Hi there! 👋
Thanks for the awesome work 👏

I'm trying to make it work with Next.js (Webpack) but I've an issue:
You may need an additional loader to handle the result of these loaders.
Do I need a Webpack loader to make it work?

Reproduction repo: https://github.com/FabienMotte/unplugin-icons-nextjs-issue

Thank you!

Can't load icons with vitepress

Hey with the latest vitepress the icons can't install. Tried both options with no avail. I just get a blank page.

    "vite-plugin-icons": "^0.2.2",
    "vite-plugin-components": "^0.6.12",
    "@iconify/json": "^1.1.306"

Also I can't update vite-plugin-windicss to the latest version and have it work with vitepress. The latest version that works is

    "vite-plugin-windicss": "^0.1.9",
    "vitepress": "^0.12.2"

Thanks for the great work.

feat: generate svg sprite from used icons

just something that popped into my head a minute ago

• collect all referenced icons into one svg sprite with ids for each (maybe one sprite per collection to avoid id clashes or prefixed-ids)
• instead of the real icon svg return a wrapper that references the id with xlink:href

would save some for icons that are used repeatedly

icon size and alignment

If using Iconify directly, as described in https://docs.iconify.design/implementations/vue/, the size of icons is smaller and matches that of the text.

With vite-plugin-icons:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M29.55 26.11l-3.05 1.52L23.66 21H15a2 2 0 0 1-2-2v-6a2 2 0 0 1 4 0v4h7v-2h-5v-2a4 4 0 0 0-8 0v1a9 9 0 1 0 8.77 11h-2.06A7 7 0 1 1 11 16v3a4 4 0 0 0 4 4h7.34l3.16 7.37l4.95-2.48z" fill="currentColor"></path><path d="M15.5 8A3.5 3.5 0 1 1 19 4.5A3.5 3.5 0 0 1 15.5 8zm0-5A1.5 1.5 0 1 0 17 4.5A1.5 1.5 0 0 0 15.5 3z" fill="currentColor"></path></svg>

With @iconify/vue@next:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M29.55 26.11l-3.05 1.52L23.66 21H15a2 2 0 0 1-2-2v-6a2 2 0 0 1 4 0v4h7v-2h-5v-2a4 4 0 0 0-8 0v1a9 9 0 1 0 8.77 11h-2.06A7 7 0 1 1 11 16v3a4 4 0 0 0 4 4h7.34l3.16 7.37l4.95-2.48z" fill="currentColor"></path><path d="M15.5 8A3.5 3.5 0 1 1 19 4.5A3.5 3.5 0 0 1 15.5 8zm0-5A1.5 1.5 0 1 0 17 4.5A1.5 1.5 0 0 0 15.5 3z" fill="currentColor"></path></svg>

Moreover, @iconify/vue@next has an InlineIcon component, which fits better for inline icons/texts. Is there any effortless way here to achieve the same effect?

expects "vue-template-compiler" with vue 3

after update to 0.3.0 the plugin throws an errow when using vue 3.

Error: Cannot find module 'vue-template-compiler'

rollback to 0.2.4 fixed it for me.

Icons break build after upgrading to a Vite versions greater than 2.0.0-beta.52

Problem:

If you update to any version of Vite greater than 2.0.0-beta.52 the following error will start appearing

This error comes from the components being generated by this plugin:

I'm not sure if this is a vite-plugin-icons issue or if something got broken is Vite in the latest releases. Given that only broken components are the icon ones I decided to post this issue here first. Thanks for the hard work on this amazing plugin!

gg系列的图标无法导入

首先感谢大佬为社区做出的贡献，许多项目我都用过，非常赞👍

遇到的问题：
在使用过程中发现 https://iconify.design/icon-sets/gg/ 里的图标都无法导入，控制台报导入了不存在的模块

Elusive Icons `el-` prefix conflicts with element-plus component `el-` prefix

In element-plus, components have the el- prefix (eg <el-button>Hi</el-button>

However, Elusive Icons also has an el- prefix.

Example:
<el-upload> = Element Plus component -> https://element-plus.org/#/en-US/component/upload
<el-upload> = Elusive icons icon -> https://iconify.design/icon-sets/el/upload.html

Elusive Icons always takes precedence in this case.

eg. <el-button> looks for the "button" icon in Elusive Icons. The intention with writing is rendering an Element Plus button but with vite-plugin-icons it's not possible, because the "el-" prefix is interpreted as an Elusive Icons prefix. The result is an error, because there's no el-button icon. el-upload is another case to consider, since el-upload is both a component and an icon.

Repro in Vitesse - install with npm install rather than pnpm (Link to branch and file with repro)

Custom icons HMR

It doesn't seem that custom icons are being reloaded when changed. I need to fully restart vite for it to take changes into account. (Which can be quite tedious, as our app takes 15-20 secondes to load with vite.)

any plans to support react?

Does the plugin have plans to support react?

Error loading custom Icons

Hi, I'm having this error when trying to reproduce vite + vue3 example

[vite] Internal server error: Cannot read property 'icons' of null
      at Collection.getIconData (C:\Users\kmilo\Desktop\Devitall\dentos\frontend\node_modules\.pnpm\@[email protected]\node_modules\@iconify\json-tools\src\collection.js:461:18)
      at getBuiltinIcon (C:\Users\kmilo\Desktop\Devitall\dentos\frontend\node_modules\.pnpm\[email protected]_954f950b29577c0f46930e88ab1c74d1\node_modules\unplugin-icons\dist\chunk-3NPAQMBG.js:162:18)
      at getIcon (C:\Users\kmilo\Desktop\Devitall\dentos\frontend\node_modules\.pnpm\[email protected]_954f950b29577c0f46930e88ab1c74d1\node_modules\unplugin-icons\dist\chunk-3NPAQMBG.js:185:20)
      at processTicksAndRejections (internal/process/task_queues.js:95:5)
      at async generateComponent (C:\Users\kmilo\Desktop\Devitall\dentos\frontend\node_modules\.pnpm\[email protected]_954f950b29577c0f46930e88ab1c74d1\node_modules\unplugin-icons\dist\chunk-3NPAQMBG.js:194:13)

OS => Windows 10
dependencies =>

"unplugin-auto-import": "^0.2.6",
    "unplugin-icons": "^0.11.2",
    "unplugin-vue-components": "^0.15.1",
    "vite": "^2.5.7",

icon folder =>

vite.config =>

Components({
      directoryAsNamespace: true,
      dirs: ['src/components/FormInput', 'src/components/Common', 'src/components'],

      extensions: ['vue'],

      dts: true,

      include: [/\.vue$/, /\.vue\?vue/],

      resolvers: [
        IconsResolver({
          componentPrefix: '',
          customCollections: ['custom'],
        }),
      ],
      exclude: ['src/pages'],
    }),

    Icons({
      compiler: 'vue3',
      customCollections: {
        custom: FileSystemIconLoader('assets/custom-a'),
      },
    }),

import in component =>

<custom-menu-arrow />

Please, some help if I'm doing something wrong, I really like this tool
Thanks

Build fail

I updated the lib to be able to use Vite 2 and now, dev works fine but builds fail with an issue.
I use the manual import way e.g import CarbonArrowLeft from '/@vite-icons/carbon/arrow-left.vue' and then use it like this <carbon-arrow-left />

Here is the error when building

[vite]: Rollup failed to resolve import "vue" from "../../../../@vite-icons/carbon/arrow-left".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "vue" from "../../../../@vite-icons/carbon/arrow-left".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`rollupInputOptions.external`
    at onRollupWarning (/Users/xyz/project/node_modules/vite/dist/node/chunks/dep-eb5d6c40.js:47866:15)
    at Object.onwarn (/Users/xyz/project/node_modules/vite/dist/node/chunks/dep-eb5d6c40.js:47753:17)
    at Object.onwarn (/Users/xyz/project/node_modules/rollup/dist/shared/rollup.js:19525:20)
    at ModuleLoader.handleResolveId (/Users/xyz/project/node_modules/rollup/dist/shared/rollup.js:18435:26)
    at /Users/xyz/project/node_modules/rollup/dist/shared/rollup.js:18402:22
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchStaticDependencies (/Users/xyz/project/node_modules/rollup/dist/shared/rollup.js:18400:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/Users/xyz/project/node_modules/rollup/dist/shared/rollup.js:18377:9)

My Vite config:

//vite.config.ts
import Vue from '@vitejs/plugin-vue'
import ViteIcons from 'vite-plugin-icons'
import ViteComponents from 'vite-plugin-components'
import { UserConfig } from 'vite'

const config: UserConfig = {
  plugins: [
    Vue(),

    // https://github.com/antfu/vite-plugin-components
    ViteComponents({
      dirs: ['./src/components', './src/layouts'],
    }),

    // https://github.com/antfu/vite-plugin-icons
    ViteIcons(),
  ],
}

export default config

Autoload libraries with dashes fails

Hi!

I didn't find how to load icons like those:

mdi-light:alarm
noto-v1:flag-for-flag-japan

If I write:

<i-mdi-light-alarm></i-mdi-light-alarm>

it fails...

I took those names here. It works for libraries without dashes 🤔

Can't find icons after vite start with .vue ending

I tried to import my icons via the following two ways:

import IconStatusBlocked from '/@vite-icons/ph/hand.vue';

and

import IconStatusBlocked from 'virtual:vite-icons/ph/hand.vue';

To get TS support I added .vue to my imports which worked fine while the vite-server was running, but after a restart of vite I get this error:

 > html:/home/***.vue:3:30: error: Do not know how to load path: html:@vite-icons/ph/hand
    3 │ import IconStatusBlocked from 'virtual:vite-icons/ph/hand.vue';
      ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 > html:/home/***.vue:8:30: error: Do not know how to load path: html:@vite-icons/ph/hourglass
    8 │ import IconStatusPending from 'virtual:vite-icons/ph/hourglass.vue';
      ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 16 errors:
html:/home/***.vue:3:25: error: Do not know how to load path: html:@vite-icons/ic/sharp-timelapse
html:/home/***.vue:4:22: error: Do not know how to load path: html:@vite-icons/mdi/clock-time-eight-outline
html:/home/***.vue:5:23: error: Do not know how to load path: html:@vite-icons/mdi/source-branch
html:/home/***.vue:6:23: error: Do not know how to load path: html:@vite-icons/mdi/source-commit
html:/home/***.vue:3:30: error: Do not know how to load path: html:@vite-icons/ph/hand
...
    at failureErrorWithLog (/home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1449:15)
    at /home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1131:28
    at runOnEndCallbacks (/home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:921:63)
    at buildResponseToResult (/home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1129:7)
    at /home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1236:14
    at /home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (/home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (/home/***/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (events.js:315:20)
    at Socket.EventEmitter.emit (domain.js:467:12)
 ERROR  Command failed with exit code 1.

Failing to load icons when not using auto-discovery

Hi!

I updated my existing application to the latest Vite (beta.29 -> 2.0.1) and vite-plugin-icons (0.2.1 -> 0.2.2) versions. Since then, the plugin fails to load the icons:

Log

vite:config bundled config file loaded in 323ms +0ms
vite:config using resolved config: {
vite:config   plugins: [
vite:config     'vite:pre-alias',
vite:config     'alias',
vite:config     'vite:dynamic-import-polyfill',
vite:config     'vite:resolve',
vite:config     'vite:html',
vite:config     'vite:css',
vite:config     'vite:esbuild',
vite:config     'vite:json',
vite:config     'vite:wasm',
vite:config     'vite:worker',
vite:config     'vite:asset',
vite:config     'vite:vue',
vite:config     'vite:define',
vite:config     'vite:css-post',
vite:config     'vite-plugin-icons',
vite:config     'vite:client-inject',
vite:config     'vite:import-analysis'
vite:config   ],
vite:config   server: {},
vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
vite:config   configFile: 'G:/dev/projekte/vite-icon-example/vite.config.js',
vite:config   inlineConfig: {
vite:config     root: undefined,
vite:config     base: undefined,
vite:config     mode: undefined,
vite:config     configFile: undefined,
vite:config     logLevel: undefined,
vite:config     clearScreen: undefined,
vite:config     server: {}
vite:config   },
vite:config   root: 'G:/dev/projekte/vite-icon-example',
vite:config   base: '/',
vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
vite:config   publicDir: 'G:\\dev\\projekte\\vite-icon-example\\public',
vite:config   command: 'serve',
vite:config   mode: 'development',
vite:config   isProduction: false,
vite:config   optimizeCacheDir: 'G:\\dev\\projekte\\vite-icon-example\\node_modules\\.vite',
vite:config   build: {
vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
vite:config     polyfillDynamicImport: true,
vite:config     outDir: 'dist',
vite:config     assetsDir: 'assets',
vite:config     assetsInlineLimit: 4096,
vite:config     cssCodeSplit: true,
vite:config     sourcemap: false,
vite:config     rollupOptions: {},
vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
vite:config     minify: 'terser',
vite:config     terserOptions: {},
vite:config     cleanCssOptions: {},
vite:config     write: true,
vite:config     emptyOutDir: null,
vite:config     manifest: false,
vite:config     lib: false,
vite:config     ssr: false,
vite:config     ssrManifest: false,
vite:config     brotliSize: true,
vite:config     chunkSizeWarningLimit: 500
vite:config   },
vite:config   env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
vite:config   assetsInclude: [Function: assetsInclude],
vite:config   logger: {
vite:config     hasWarned: false,
vite:config     info: [Function: info],
vite:config     warn: [Function: warn],
vite:config     error: [Function: error],
vite:config     clearScreen: [Function: clearScreen]
vite:config   },
vite:config   createResolver: [Function: createResolver]
vite:config } +9ms
vite:deps Crawling dependencies using entries:
vite:deps   G:/dev/projekte/vite-icon-example/index.html +0ms
vite:resolve 1ms   /src/main.js -> G:/dev/projekte/vite-icon-example/src/main.js +0ms
vite:resolve 7ms   vue -> G:/dev/projekte/vite-icon-example/node_modules/vue/dist/vue.runtime.esm-bundler.js +14ms
vite:resolve 1ms   ./App.vue -> G:/dev/projekte/vite-icon-example/src/App.vue +2ms
vite:resolve 3ms   /@vite-icons/carbon/accessibility.vue -> @vite-icons/carbon/accessibility +6ms
vite:resolve 1ms   ./components/HelloWorld.vue -> G:/dev/projekte/vite-icon-example/src/components/HelloWorld.vue +2ms
> html:G:/dev/projekte/vite-icon-example/src/App.vue: error: File could not be loaded: html:@vite-icons/carbon/accessibility
  2 │ import IconAccessibility from '/@vite-icons/carbon/accessibility.vue'
    ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
html:G:/dev/projekte/vite-icon-example/src/App.vue:2:30: error: File could not be loaded: html:@vite-icons/carbon/accessibility
  at failureErrorWithLog (G:\dev\projekte\vite-icon-example\node_modules\esbuild\lib\main.js:1170:15)
  at buildResponseToResult (G:\dev\projekte\vite-icon-example\node_modules\esbuild\lib\main.js:906:32)
  at G:\dev\projekte\vite-icon-example\node_modules\esbuild\lib\main.js:1001:20
  at G:\dev\projekte\vite-icon-example\node_modules\esbuild\lib\main.js:553:9
  at handleIncomingPacket (G:\dev\projekte\vite-icon-example\node_modules\esbuild\lib\main.js:642:9)
  at Socket.readFromStdout (G:\dev\projekte\vite-icon-example\node_modules\esbuild\lib\main.js:520:7)
  at Socket.emit (events.js:315:20)
  at addChunk (_stream_readable.js:295:12)
  at readableAddChunk (_stream_readable.js:271:9)
  at Socket.Readable.push (_stream_readable.js:212:10)

Link to repro: https://github.com/timozander/vite-icon-bug-repro

resolveId is called, however, then Vite seems to ignore your load() function and passes it directly to esbuild. Changing the mode from post to pre fixes this. However, I do not know if this would impact the auto-loading functionality

`jsx` compiler failing when icon name contains numbers

There are icon names with numbers, not only letters, for example MdiStore24Hour.

The fix is simple, just replacing:

function camel(str: string) {
  return str.replace(/-([a-z])/g, g => g[1].toUpperCase())
}

with

function camel(str: string) {
  return str.replace(/-([a-z0-9])/g, g => g[1].toUpperCase())
}

F:\work\projects\quini\GitHub\antfu\unplugin-icons\examples\vite-preact\unknown: Identifier directly after number. (2:26)
  1 | /* @babel/template */;
> 2 | export default mdiStore-24Hour
    |                          ^
    at Object._raise (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:798:17)
    at Object.raiseWithData (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:791:17)
    at Object.raise (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:752:17)
    at Object.readNumber (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:2578:18)
    at Object.getTokenFromCode (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:2272:14)
    at Object.getTokenFromCode (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:7197:18)
    at Object.getTokenFromCode (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:9934:18)
    at Object.nextToken (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:1750:12)
    at Object.next (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:1656:10)
    at Object.parseExprOp (F:\work\projects\quini\GitHub\antfu\unplugin-icons\node_modules\.pnpm\@[email protected]\node_modules\@babel\parser\lib\index.js:10918:14

Icons aren't aligned correctly

Using the icons via the plugin and comparing them to the pasted in SVG, you can see the vertical alignment is wrong.

See

<i-tabler:arrow-narrow-left
	class="w-5 h-5"
/>
<svg
	xmlns="http://www.w3.org/2000/svg"
	aria-hidden="true"
	role="img"
	class="w-5 h-5"
	width="32"
	height="32"
	preserveAspectRatio="xMidYMid meet"
	viewBox="0 0 24 24"
>
	<g
		class="icon-tabler"
		fill="none"
		stroke="currentColor"
		stroke-width="2"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path d="M5 12h14" />
		<path d="M5 12l4 4" />
		<path d="M5 12l4-4" />
	</g>
</svg>

The only added part is the width and height classes.

See for reference.
The latter arrow (direct SVG) is aligned correctly with the text, whereas the plugin icon is a little too high. I tried with a couple of different icon sets, so it's not just this specific icon.

[vite] Internal server error: Dynamic require of "@svgr/core" is not supported

I'm trying to use this package with vite and react, and I've followed the readme but I'm getting the following error during build:

[vite] Internal server error: Dynamic require of "@svgr/core" is not supported

This seems to be triggered from https://github.com/antfu/unplugin-icons/blob/038cf0e5431ff0f4889f5f150b18e74f19ebdced/src/core/compilers/jsx.ts#L6

Relevant parts of my vite.config.js:

import Icons from 'unplugin-icons/vite';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';

export default defineConfig({
  plugins: [
    Icons({
      compiler: 'jsx',
      jsx: 'react',
      customCollections: {
        myproject: FileSystemIconLoader('./src/assets/icons'),
      },
    }),
  ],
});

`defaultClass` option not working

Tested in https://github.com/antfu/vitesse-lite.

Unable to load icons with a number as the first char

<twemoji-1st-place-medal />

Configure to bundle icon sets

Provide a configuration to bundle a specified set of icons and load them sync/asynchronously.

Originally posted by @antfu in #7 (comment)

Support Iconify collection packages

iconify/icon-sets#15 (comment)

Failed to resolve import "vue"

This is related to #2

Here is the example repo.

git clone https://github.com/nandordudas/vite-plugin-icons
cd vite-plugin-icons
yarn # or pnpm i
yarn add -D @iconify/json

DEBUG=* yarn dev

connect:dispatcher <anonymous>  : /@vite-icons/mdi/alarm-off +0ms
11:34:28 AM [vite] Internal server error:
  Plugin: vite:imports
  File: /@vite-icons/mdi/alarm-off
  1  |  import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
     |                                                                                                     ^
  2  |  
  3  |  const _hoisted_1 = {
  Error: Failed to resolve import "vue". Does the file exist?
      at TransformContext.error (/.../vite-plugin-icons/node_modules/vite/dist/node/chunks/dep-7bace6f3.js:59717:50)
      at TransformContext.transform (/.../vite-plugin-icons/node_modules/vite/dist/node/chunks/dep-7bace6f3.js:53118:30)
      at processTicksAndRejections (node:internal/process/task_queues:93:5)
      at async Object.transform (/.../vite-plugin-icons/node_modules/vite/dist/node/chunks/dep-7bace6f3.js:59907:30)
      at async transformRequest (/.../vite-plugin-icons/node_modules/vite/dist/node/chunks/dep-7bace6f3.js:66142:29)
      at async /.../vite-plugin-icons/node_modules/vite/dist/node/chunks/dep-7bace6f3.js:66229:32
  vite:time 30ms  /@vite-icons/mdi/alarm-off +32ms

Node: v15.5.1
OS: Manjaro Linux x86_64

Custom Icons

This is great, I've tried using the vscode-iconify with Vitesse and the DX is super good, I don't think I'll want to go back to the older days!

Which raises the following question: Is it possible to configure custom svgs to be loaded using the same system? I know since the icons are my own, I can just pack them in the project or create my own component to load them (which is what I've been doing so far). But it'd be great to be able of using the same affordances as the other icons, like seeing the icon preview in vscode and such.

Icon names ending in numbers are not working

It appears icons with ending numbers aren't working.

<heroicons-outline-menu-alt-2 />

gets converted to:

/@id/@vite-icons/heroicons-outline/menu-alt2

and of course fails to load without the missing hyphen

Default class isn't merged

Using Vue 2 compiler, setting a class on the icon component overrides the default class:

/** @type {import('unplugin-icons').Options} */
const unpluginIconsOptions = {
  compiler: 'vue2',
  defaultClass: 'base-icon svg-wrap',
}

<template>
  <IconCustomSend class="no-info"/>
</template>

Result:

<svg data-v-ad45f71a="" class="no-info">...</svg>

Correct usage with heroicons + dynamic component syntax

Howdy! Still learning the ropes, and I promise I've read the documentation, so I promise I've spent a bit of time reading the documentation on both vite-plugin-icons + iconify...

Current setup - Using Vitesse boilerplate, no major changes to icons or components plugins configs:

    ViteComponents({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      customLoaderMatcher: id => id.endsWith('.md'),

      // generate `components.d.ts` for ts support with Volar
      globalComponentsDeclaration: true,

      // auto import icons
      customComponentResolvers: [
        HeadlessUiResolver(),
        ViteIconsResolver({
          componentPrefix: '',
          // enabledCollections: ['hero', 'mdi', 'carbon'],
        }),
      ],
    }),

    // https://github.com/antfu/vite-plugin-icons
    ViteIcons(),

In my Home Layout File /src/layouts/home.vue, I am working with a simple v-for loop. There is the following code:

<component :is="item.icon" class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300" aria-hidden="true" />

And I pass in an array of objects that look like this:

const navigation = [
  { name: 'Dashboard', href: '#', icon: 'heroicons-outline-x', current: true },
  { name: 'Team', href: '/hi/Armen', icon: 'heroicons-outline-home', current: false },
  { name: 'Projects', href: '#', icon: 'heroicons-outline:home', current: false },
  { name: 'Calendar', href: '#', icon: 'heroicons-outline:home', current: false },
  { name: 'Documents', href: '#', icon: 'heroicons-outline:home', current: false },
  { name: 'Reports', href: '#', icon: 'heroicons-outline:home', current: false },
]

Neither heroicons-outline-* or heroicons-outline:* appear to work.

I also tried this approach, but kept getting the following error --> Module '"virtual:vite-icons/*"' has no exported member 'MenuAlt2Icon'. Did you mean to use 'import MenuAlt2Icon from "virtual:vite-icons/*"' instead?ts(2614)

// import {
//   IconBellIcon,
//   IconCalendarIcon,
//   IconChartBarIcon,
//   FolderIcon,
//   HomeIcon,
//   InboxIcon,
//   MenuAlt2Icon,
//   UsersIcon,
//   XIcon,
// } from 'virtual:vite-icons/heroicons/outline'

I'm sure that whatever I'm doing wrong is probably something simple/stupid, but I'd appreciate any guidance you might be able to provide.

Thank you!

[vite-react] Runtime error in vite-react example

I'm trying to run the vite-react example from the examples folder, but am getting a runtime error. Here's what I did:

cd unplugin-icons
pnpm install
pnpm run build
cd examples/vite-react
pnpm run dev

The build completes, but when I open the browser I get this error in the console:

Uncaught ReferenceError: React is not defined
    at logosReact (react.jsx:2)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)

The above error occurred in the <logosReact> component:

    at logosReact (http://localhost:3000/@id/~icons/logos/react.jsx:2:3)
    at header
    at div
    at App (http://localhost:3000/src/App.tsx:31:29)

Cannot find module '@iconify/json'

I have got the same error yesterday like #1 and tried to reproduce, but got another errors.

Here is the example repo.

git clone https://github.com/nandordudas/vite-plugin-icons
cd vite-plugin-icons
pnpm i # or yarn

After manually installed @iconify/json got another error.

Node: v15.5.1
OS: Manjaro Linux x86_64

Typings for imported icons

Hi! Any way to have typings for imported icons?

import IconHome from '/@vite-icons/oi/home'

has the usual no typings found error.
Have to import them rather than auto-import because they're being used in a list like this:

  { title: 'Home', icon: IconHome, link: '/' },

Trying to build a list of menu items like so

const items = reactive([
  // @ts-ignore
  { title: 'Home', icon: IconHome, link: '/' },
  { title: 'Counter', icon: IconCounter, link: '/Counter' },
  { title: 'Fetch data', icon: 'oi-list-rich', link: '/Fetch-Data' }
])

The string icons don't get imported as a component, and I can't figure out how to inline import them so I"m trying to just do the standard import but I get typing errors. Open to ideas.

[Question]: How to use icons from string?

When using the icons with strings it's not working in component. How to get it working, please? Sample code -

<template>
    <div>
        <nav class="grid gap-y-8">
            <a
		v-for="item in solutions"
		:key="item.name"
		:href="item.href"
		class="-m-3 p-3 flex items-center rounded-md"
	   >
		<component :is="item.icon" class="flex-shrink-0 h-6 w-6 text-black" aria-hidden="true" />
		<span class="ml-3 text-base font-medium text-gray-200">{{ item.name }}</span>
	   </a>
	</nav>
</div>

<script setup lang="ts">

const solutions = [
	{
		name: 'Item',
		description: 'Go to item',
		href: '#',
		icon: 'heroicons-outline:chart-bar',
	},
	{
		name: 'Item',
		description: 'Go to item',
		href: '#',
		icon: 'heroicons-outline:cursor-click',
	},
];

</script>

Icons get "transform: translateY(-5%);" by default

I was wondering why icons get "transform: translateY(-5%) by default. Is this intended? Or is intrinsic to the icon packs?

[Feature Request] Icon collection alias

有一些图标集的名字很长例如 icon-park

如果prefix定义为 icon 时，使用起来很难受

<icon-icon-park-user />

是否可以支持图标集别名或重命名？

Vue 3 CLI and Auto Importing

Hello!

How to setup vue.config.js in order to support Auto Importing feature? I can't use "import from..." there, so can't do it like this (taken from the https://github.com/antfu/unplugin-icons#auto-importing):

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

Seems like I need to use "require", but how can I specify resolver for the unplugin-vue-components plugin?

Thanks!

Support a default collection for auto-import

Hi,

I was looking for something like a defaultCollection option for the IconsResolver but that doesn’t seem to exist yet. I usually try to stick to one icon collection in any single project, simply because the general art style is consistent and only use icons from other collections as kind-of last resort (though unplugin-icons definitively makes this much easier, thank you!).

Right now I’ve been using the system-uicons and it gets a little tedious to write <icon-system-uicons-plus/> when it probably could be <icon-plus/> instead and only if I want to deviate from my default I’d have to write something like <icon-mdi-account/>.

I thought I could get away with

IconsResolver({
  prefix: 'icon',
    alias: {
      '': 'system-uicons',
    }
})

but… curse this sudden but inevitable betrayal :).

Thank you for time & work,

Konrad

versions used:
[email protected]
[email protected]

Dynamic icon components

Is it possible to dynamically use icons?

I'm using the vitesse template and would previously use something like <Icon :icon="myIconVariable" /> but now it seems like that no longer exists so I was wondering if it is still possible to do something like that.

I tried something like this without much luck

<template>
  <component :is="myIconVariable.replace(':', '-')" />
</template>

<script setup>
const myIconVariable = 'mdi:vuejs'
</script>

Error: Cannot find module '@iconify/json'

I just installed it with npm and added:
import IconAccessibility from "/@vite-icons/carbon/accessibility.vue";
Now I get:

failed to load config from C:\dev\repositories\BettIlias\Frontend\vite.config.ts
error when starting dev server:
Error: Cannot find module '@iconify/json'
Require stack:
- C:\dev\repositories\BettIlias\Frontend\node_modules\.pnpm\[email protected]_@[email protected]\node_modules\vite-plugin-icons\dist\index.js
- C:\dev\repositories\BettIlias\Frontend\vite.config.ts
- C:\dev\repositories\BettIlias\Frontend\node_modules\.pnpm\[email protected]\node_modules\vite\dist\node\chunks\dep-0b3d3f5e.js
- C:\dev\repositories\BettIlias\Frontend\node_modules\.pnpm\[email protected]\node_modules\vite\dist\node\cli.js
- C:\dev\repositories\BettIlias\Frontend\node_modules\.pnpm\[email protected]\node_modules\vite\bin\vite.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\dev\repositories\BettIlias\Frontend\node_modules\.pnpm\[email protected]_@[email protected]\node_modules\vite-plugin-icons\dist\index.js:74:13)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
 ERROR  Command failed with exit code 1.

any plans to support dynamic components ?

I have a use case where I have a list of objects that contains the icon information so I tried using:

<component :is="`i-${icon}`" />

but no luck and quite frankly I am not sure if it is even possible.

Interference with components starting with "feather"

<feathers-vuex-pagination />, which comes from Feathers-Vuex is not able to load due to a conflict with feather-icons. With the latest release of vite-plugins-icons and vite-plugin-components, I am getting the following error message, which prevents app load:

I'm using the Vitesse template with the default config for vite-plugin-components and vite-plugin-icons.

dynamic use icon

how to use

  <icon-accessibility/>
  <icon-account-box style="font-size: 2em; color: red"/>

switch to

  <icon name="accessibility"/>
  <icon  name="account-box " style="font-size: 2em; color: red"/>

thus , I can dynamic use icon

  <icon :name="iconName"/>

as some time we need to show a batch of icon by some kind of logic,but now seem to not support, Maybe I miss something.

<component :is="指定要展示的组件名称"></component>

这组件里如何使用icons插件啊

[jsx] scale option is not respected

The JSXCompiler runs the svg through svgr, with the icon: true option. This option sets width and height to 1em, which overrides the values provided from the scale option. I think that option can be removed, since this plugin already sets width and height based on the scale.

It has unmet peer dependency "vue-template-compiler"

When run install script, the commandline shows as follow:

warning " > [email protected]" has unmet peer dependency "vue-template-compiler@^2.6.12".