基于vue3.0的Svg插件

案例下载地址： https://download.csdn.net/download/QQ408896436/87106274

1、安装插件

npm i vite-plugin-svg-icons -D

2、安装glob

不安装会提示Error: Cannot find module 'fast-glob'

npm install fast-glob -D

3、在vite.config.js中配置

3.1 iconDirs所有的 svg的文件都存放在该文件夹下

3.2 symbolId指定use标签中href格式

导出名为createSvgIconsPlugin并加大括号，不然会提示TypeError: (0 , import_vite_plugin_svg_icons.default) is not a function

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(__dirname, 'src/assets/svg')], // 配置路劲在你的src里的svg存放文件
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  resolve: {
    alias: [{
        find: '@',
        replacement: path.resolve(__dirname, 'src')
    }]
  }
})

4、在main.js注册脚本

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'virtual:svg-icons-register'; // 引入svg icon注册脚本

createApp(App).mount('#app')

5、编写组件SvgIcon.vue

<template>
    <svg
      :class="['svg-icon', className]"
      :style="{
        width: iconSize + 'px',
        height: iconSize + 'px',
      }"
      aria-hidden="true"
    >
      <use :xlink:href="'#icon-' + iconName" :fill="color" />
    </svg>
  </template>
  <script setup>
  defineProps({
    iconName: {
      type: String,
      default: "",
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
    iconSize: {
      type: [Number, String],
      default: 30,
    },
  });
  </script>
  <style scope>
  .svg-icon {
    fill: currentColor;
    vertical-align: middle;
  }
  </style>

6、使用

<template>
  <div>
    <SvgIcon
      :iconName="'book'"
      :className="'mySvgIcon'"
      :iconSize="150"
      :color="'#53a8ff'"
    />
  </div>
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon.vue";
</script>

运行效果