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 fromv0.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(),
],
}
Purge Icons
Comparsion with
vite-plugin-icons
Pros
- SSR/SSG friendly
- On-demanded bunding
- Works with Vue 3
Cons
- No Iconify runtime, no web fetching (string icon IDs)
- Updates are sync with other content
purge-icons
Pros
- Iconify runtime
- On-demanded bundling combining with runtime web fetching
- Framework agnostic
Cons
- Icons show up after the Iconify runtime loaded
- Not SSR/SSG friendly
Sponsors
This project is part of my Sponsor Program
License
MIT License © 2020 Anthony Fu