Vue3中使用svg图标

• Vue3+vite+ts
  -安装依赖

npm install svg-sprite-loader
yarn add svg-sprite-loader

• 创建需要使用到的文件（目录）
  这边我是在src目录下的components文件下创建的svgIcon文件夹，svgIcon文件夹内创建index.vue文件和svgFn.ts文件，分别放置组件和核心ts代码，另外创建一个svg-icons文件夹用来放置.svg文件
  
  文件目录
• index.vue文件代码

• svgFn.ts文件代码

import { readFileSync, readdirSync } from 'fs'
let idPerfix = ''
const svgTitle = /+].*?)>/
const clearHeightWidth = /(width|height)="([^>+].*?)"/g
const hasViewBox = /(viewBox="[^>+].*?")/g
const clearReturn = /(\r)|(\n)/g
// 查找svg文件
const svgFind = (e: any): any => {
    const arr = []
    const dirents = readdirSync(e, { withFileTypes: true })
    for (const dirent of dirents) {
        if (dirent.isDirectory()) arr.push(...svgFind(e + dirent.name + '/'))
        else {
            const svg = readFileSync(e + dirent.name)
                .toString()
                .replace(clearReturn, '')
                .replace(svgTitle, ($1, $2) => {
                    let width = 0,
                        height = 0,
                        content = $2.replace(clearHeightWidth, (s1: any, s2: any, s3: any) => {
                            if (s2 === 'width') width = s3
                            else if (s2 === 'height') height = s3
                            return ''
                        })
                    if (!hasViewBox.test($2)) content += `viewBox="0 0 ${width} ${height}"`
                    return ``
                }).replace('', '')
            arr.push(svg)
        }
    }
    return arr
}
// 生成svg
export const createSvg = (path: any, perfix = 'icon') => {
    if (path === '') return
    idPerfix = perfix
    const res = svgFind(path)
    return {
        name: 'svg-transform',
        transformIndexHtml(dom: String) {
            return dom.replace(
                '',
                ``
            )
        }
    }
}

• 在 main.ts文件中设置svg-icon为全局组件

import { createApp } from 'vue'
import svgIcon from '@/components/svgIcon/index.vue'
import App from './App.vue'
const app = createApp(App)
app.component('svg-icon', svgIcon)
app.mount('#app')

• vite-config.ts 文件中添加配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

//引入核心ts文件
import { createSvg } from './src/components/svgIcon/svgFn'

export default defineConfig({
  plugins:[{
    vue(),
    //路径指向 .svg 文件夹
    createSvg('./src/components/svgIcon/svg-icons/')
  }]
})

• 引入svg文件（iconfont官网，点击进入）
  
  
  
  
  
  复制的svg代码粘贴到项目里，文件名称用户使用时选取
• 代码中使用

示例

记录完毕！参考文章 、参考文章