vite-plugin-iconify-offline

On-demand bundle Iconify icons to the client.

Originally developed to fix nuxt/ui#5242, and the implementation is based on the idea from @adamrybak.

Installation

npm install -D vite-plugin-iconify-offline

Usage

1. Configure in vite.config.ts

   import { defineConfig } from 'vite';
   import iconifyOffline from 'vite-plugin-iconify-offline';
   
   export default defineConfig({
     plugins: [
       iconifyOffline({
         module: '@iconify/vue',
         files: ['./components/**/*.vue', './pages/**/*.vue'],
       }),
     ],
   });

2. Add types in tsconfig.json

   {
     "compilerOptions": {
       "types": ["vite-plugin-iconify-offline/client"]
     }
   }

3. Install icon collections you want to use, e.g.,

   npm install -D @iconify-json/lucide @iconify-json/mdi

4. Initialize in main.ts

   import { loadIcons } from 'virtual:iconify-offline';
      
   loadIcons();

Options

See Options interface in src/index.ts.