vue3中svg图标的封装与使用

组件封装：

<template><svg :class="svgClass" :style="{ width: size + 'px', height: size + 'px', color: color, verticalAlign:deviation+'em'}" aria-hidden="true"><use :xlink:href="`#icon-${name}`" /></svg>
</template><script>
export default {name: 'svg-icon',props: {name: { type: String, required: true },     // svg 图标名称className: { type: String, default: '' },   // 指定的类样式size: { type: Number, default: 28 },        // 图标尺寸color: { type: String, default: "#000" }, // 图标颜色deviation:{type:Number,default:-0.2} //图标上下偏移量},computed: {  // 计算属性svgClass () {if (this.className) {return 'svg-icon ' + this.className} else {return 'svg-icon'}}}
}
</script><style scoped>
.svg-icon {width: 1em;height: 1em;vertical-align: -0.2em;fill: currentColor;overflow: hidden;padding:0  0.15em;
}
</style>

svg图标存放目录：

index.js获取svg文件

// 获取当前目录所有为.svg的文件
const req = require.context('./svg', false, /\.svg$/)// 解析获取的.svg文件的文件名称并返回
const requireAll = (requireContext) =>{return requireContext.keys().map(requireContext)
}
requireAll(req)

vue.config中定义svg图标目录

const {defineConfig} = require('@vue/cli-service')
const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = defineConfig({transpileDependencies: true,chainWebpack(config) {config.module.rule('svg').exclude.add(resolve('src/assets/icons'))  // 存放 svg 目录的目录.end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/assets/icons'))  // 存放 svg 目录的目录.end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()},......}

页面中的使用：

<svg-icon name="wode" :size="25"/>