Access thousands of icons as Vue components in Vite

vite-plugin-icons

Access thousands of icons as Vue components in Vite

• 90+ iconsets powered by Iconify
• Browser the icons

Install

Install

npm i -D vite-plugin-icons

Add it to vite.config.js

// vite.config.js
import Icons from 'vite-plugin-icons'

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

<script setup>
import IconAccessibility from '/@vite-icons/carbon/accessibility.vue'
import IconAccountBox from '/@vite-icons/mdi/account-box.vue'
</script>

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

Auto Importing

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

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

export default {
  plugins: [
    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: [
    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>

Comparsion with Purge Icons

TODO:

Sponsors

This project is part of my Sponsor Program

License

MIT License © 2020 Anthony Fu