Icons ​

Unplugin Icons ​

In this section you will learn how to incorporate unplugin-icons into your app. unplugin-icons allows you to use icons from multiple icon sets, such as Bootstrap Icons, Material Design Icons, Font Awesome 4 and many more all with automatic tree-shaking!.

Installation ​

To set up unplugin-icons, you can read directly from their documentation here or keep reading for a quick start guide.

Preferred Installation ​

The preferred installation makes use of unplugin-vue-components as it follows the same principles as the preferred installation for our core package.

To start, install the necessary packages:

// vite.config.js/ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import Components from 'unplugin-vue-components/vite'
import IconsResolve from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [IconsResolve()],
      dts: true,
    }),
    Icons({
      compiler: 'vue3',
      autoInstall: true,
    }),
  ],
})

With autoInstall: true using any icon set in your app will automatically import and include that icon set in your dependencies! No manual imports are required!

If you are using TypeScript you will want to add the unplugin-icons/types/vue to the compilerOptions.types array. While there, you should also make sure you included the components.d.ts in the include array:

// tsconfig.json
{
  "include": ["components.d.ts"],
  "compilerOptions": {
    "types": ["unplugin-icons/types/vue"]
  }
}

Then to include an icon, follow the format i-{collection}-{icon-name} in your template, where the collection is the id on https://icon-sets.iconify.design/. For example, to include 0-circle in your app, simply use the component IBi0Circle, no import is needed. As stated, you can use any icon from any icon set.

<IBi0Circle />
<IBiActivity color="red" />
<!-- You can use any icon set, no need to worry about importing -->
<IMdiAccountBox />
<!-- fa -->
<IFaAngellist />

View the unplugin-vue-components documentation for their extra feature, such as Global Custom Icon Transformation and other information.

Basic Installation ​

Of course, there is always the ability to slim down. To slim down the installation, you can manually import only the bootstrap-icons icon set, disable auto importing, and not use unplugin-vue-components read below. Note, the preferred installation automatically treeshakes all components, both installation methods should have the same final dist size.

// vite.config.js/ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Icons({
      compiler: 'vue3',
    }),
  ],
})

Using this method, you will need to manually import each icon:

<template>
  <IBi0Circle />
  <IBiActivity color="red" />
  <!-- Cannot use, is not a dependency -->
  <!-- <IMdiAccountBox /> -->
  <!-- fa -->
  <!-- <IFaAngellist /> -->
</template>

<script setup lang="ts">
import IBi0Circle from '~icons/bi/0-circle'
import IBiActivity from '~icons/bi/activity'
// import IMdiAccountBox from '~icons/mdi/account-box'
// import IFaAngellist from '~icons/mdi/angellist'
</script>