How to Use Unplugin Icons in a Vue Project

unplugin-icons is a tool to access icons as components on-demand.

Installation

Create a Vue project and install the packages.

• unplugin-icons
• unplugin-vue-components optional - I include it for the convenience of components auto import

pnpm create vite vue-3-icon -- --template vue
cd vue-3-icon
pnpm i -D unplugin-icons unplugin-vue-components
pnpm create vite vue-3-icon -- --template vue
cd vue-3-icon
pnpm i -D unplugin-icons unplugin-vue-components

Configuration

Register the plugins in vite.config.js and pass the config options you want.

import { defineConfig } from "vite"
import Components from "unplugin-vue-components/vite"
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
import Vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [
    Vue(),

    Components({
      resolvers: [IconsResolver({ prefix: "" })]
    }),

    Icons({
      autoInstall: true
    })
  ]
})
import { defineConfig } from "vite"
import Components from "unplugin-vue-components/vite"
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
import Vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [
    Vue(),

    Components({
      resolvers: [IconsResolver({ prefix: "" })]
    }),

    Icons({
      autoInstall: true
    })
  ]
})

• With prefix: "" we do not have to add i- before the collection name.
• With autoInstall: true, we can browse the icons and use it in our project without having to install the icon pack manually.

Usage

In your <template>, add the icon with {prefix}-{collection}-{icon}. You can also style it easily with class like any other element. I use Windi CSS here.

<carbon-face-cool class="text-yellow text-3xl" />
<carbon-face-cool class="text-yellow text-3xl" />