项目结构
网络异常，图片无法展示
|
1. 首先引入svg插件
yarn add svg-sprite-loader -D // 或者 npm install svg-sprite-loader -D 复制代码
网络异常，图片无法展示
|
2. 创建文件
在@/src里面创建icons文件夹，里面创建index.vue(svgicon的模板文件), index.ts(svgicon的js逻辑), svg文件夹(svg图标存放的地址)
index.vue(svgicon的模板文件)
这部分需要用到fs模块，所以需要：
yarn add fs // 或者 npm install fs 复制代码
<template> <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }"> <use :xlink:href="iconName"></use> </svg> </template> <script setup lang="ts"> import { computed, defineProps } from 'vue' const props = defineProps({ name: { type: String, required: true }, color: { type: String, default: '' } }) const iconName = computed(() => `#icon-${ props.name }`) const svgClass = computed(() => { if(props.name) return `svg-icon icon-${ props.name }` return 'svg-icon' }) </script> <style scoped> .svg-icon{width: 1em;height: 1em;fill:currentColor; vertical-align: middle;} </style> 复制代码
index.ts(svg的js逻辑文件)
这部分有问题的小伙伴可以找我，我写了注释的。
import { readFileSync, readdirSync } from 'fs' let idPerfix = '' const svgTitle = /<svg([^>+].*?)>/ const clearHeightWidth = /(width|height)="([^>+].*?)"/g const hasViewBox = /(viewBox="[^>+].*?")/g const clearReturn = /(\r)|(\n)/g // 查找svg文件 function svgFind(e) { 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, s2, s3) => { if (s2 === 'width') width = s3 else if (s2 === 'height') height = s3 return '' }) if (!hasViewBox.test($2)) content += `viewBox="0 0 ${width} ${height}"` return `<symbol id="${idPerfix}-${dirent.name.replace('.svg', '')}" ${content}>` }).replace('</svg>', '</symbol>') 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( '<body>', `<body><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0; height: 0">${res.join('')}</svg>` ) } } } 复制代码
svg存放svg图标
网络异常，图片无法展示
|
3. 在vite.config.ts里面引用svg
import { defineConfig } from "vite" import { createSvg } from './src/icons/index' export default defineConfig({ plugins: [ vue(), createSvg('./src/icons/svg/') ] }) 复制代码
4. 在main.ts中写入svg-icon模板
import { createApp } from 'vue' import App from './App.vue' import svgIcon from './icons/index.vue' const app = createApp(App) app .component('svg-icon', svgIcon) .mount('#app') 复制代码
酱紫，就可以啦。（用法）
网络异常，图片无法展示
|
- name是svg的名称
- color是svg的颜色
