Vite-plugin-icons NPM

vite-plugin-icons

Access thousands of icons as Vue components in Vite

90+ iconsets powered by Iconify
Browser the icons

Install

ℹ️ Vite 2 is supported from v0.2.x, Vite 1's support is discontinued.

Install the plugin and peer dependency @iconify/json

npm i -D vite-plugin-icons @iconify/json

Add it to vite.config.js

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Icons()
  ],
}

<script setup>
import IconAccessibility from 'virtual:vite-icons/carbon/accessibility'
import IconAccountBox from 'virtual:vite-icons/mdi/account-box'
</script>

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

Options

You can set default styling for all icons. The following config shows the default values of each option:

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Icons from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Icons({
      scale: 1.2, // Scale of icons against 1em
      defaultStyle: '', // Style apply to icons
      defaultClass: '', // Class names apply to icons
      compiler: null, // Compiler 'vue2' or 'vue3', by default detected automatically
    })
  ],
}

Auto Importing

Use with vite-plugin-components (>= v0.5.5)

// vite.config.js
import Vue from '@vitejs/plugin-vue'
import Components from 'vite-plugin-components'
import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'

export default {
  plugins: [
    Vue(),
    Components({
      customComponentResolvers: ViteIconsResolver(),
    }),
    ViteIcons(),
  ],
}

Then you can use any icons as you want without explicit importing (only the used icons will be bundled)

<template>
  <i-carbon-accessibility/>
  <i-mdi-account-box style="font-size: 2em; color: red"/>
</template>

Name Conversion

When using component resolver, you have to follow the name conversion for icons to be properly inferred.

{prefix}-{collection}-{icon}

The collection field follows Iconify's collection IDs.

By default, the prefix is set to i while you can customize via config

export default {
  plugins: [
    Vue(),
    Components({
      customComponentResolvers: ViteIconsResolver({
        componentPrefix: 'icon' // <--
      }),
    }),
    ViteIcons(),
  ],
}

<template>
  <icon-mdi-account />
</template>

Non-prefix mode is also supported

ViteIconsResolver({
  componentPrefix: '', // <--
  // this is optional, default enabling all the collections supported by Iconify
  enabledCollections: ['mdi']
})

<template>
  <mdi-account />
</template>

Vue 2 Support

npm i -D vue-template-compiler vite-plugin-vue2

And it just works.

// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
import ViteIcons from 'vite-plugin-icons'

export default {
  plugins: [
    createVuePlugin(),
    ViteIcons(),
  ],
}