Using resolvers

You can use resolvers to make it easier to use icons in your project. Resolvers allow you to use icons without having to import them in every component. Resolvers is a feature of unplugin-vue-components

First install unplugin-vue-components:

pnpm install unplugin-vue-components -D

Then add the resolver to your vite.config.js:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import VueIconsResolver from '@kalimahapps/vue-icons/resolver';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        VueIconsResolver,
      ],
    })
  ],
});