Using resolvers

WARNING

Resolves are deprecated and will be removed in future versions. Check the Nuxt/Vite page for more information on how to use VueIcons with Nuxt and Vite.

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,
      ],
    })
  ],
});