Heroicons Vue3 集成教程：vite-plugin-svg-icons 配置详解

npm create vite@latest heroicons-demo --template vue
cd heroicons-demo
npm install

npm install @heroicons/vue3 -S

npm install vite-plugin-svg-icons -S

npm install @types/node -D

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[name]'
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})

src/
  assets/
    icons/
      solid/
        user.svg
        lock.svg
      outline/
        search.svg
        settings.svg

import { createApp } from 'vue'
import App from './App.vue'
import SvgIcon from './components/SvgIcon.vue'

const app = createApp(App)
app.component('SvgIcon', SvgIcon)
app.mount('#app')

import fs from 'fs'
import path from 'path'

const iconDir = path.resolve(__dirname, '../assets/icons')

function getIconNames(dir: string): string[] {
  const files = fs.readdirSync(dir, { withFileTypes: true })
  const icons: string[] = []
  files.forEach(file => {
    if (file.isDirectory()) {
      icons.push(...getIconNames(path.join(dir, file.name)))
    } else if (file.name.endsWith('.svg')) {
      icons.push(file.name.replace(/\.svg$/, ''))
    }
  })
  return icons
}

export const iconList = getIconNames(iconDir)

// 在需要的组件里
import { useSvgIcon } from 'vite-plugin-svg-icons/client'
const UserIcon = useSvgIcon('user')