vue 使用vite-plugin-svg-icons

安装

npm install vite-plugin-svg-icons --save
npm install fast-glob --save

在vite.config.js配置

 

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

function resolve(dir) {
  return path.join(__dirname, dir)
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
　　　　// 新建 assets/svg文件夹，将svg放入文件夹下
      iconDirs: [resolve('src/assets/svg')],
       // 定义每个 SVG 图标的符号 ID
      symbolId: "icon-[name]"
    }),
  ],
}）

 

定义一个svgicon组件，新建SvgIcon.vue

<script setup>
const props=defineProps({
  // SVG 文件名称
  name:{
    type:String,
    required:true,
  },
  // 额外类名
  className:{
    type:String,
    default:"",
  },
  // SVG 大小
  size:{
    type:Number,
    default:20,
  }
 
})
</script>

<template>
    <svg aria-hidden="true" :width="size" :height="size"  :class="` ${className}` ">
      <use :href="`#icon-${name}`" ></use>
    </svg>
  </template>

  <style scoped>
   
  </style>

 

重要的一步，在main.js中

import 'virtual:svg-icons-register'

全局注册组件

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

 

使用

<SvgIcon name="图标名" class="cls__svg" :size="25"></SvgIcon>