1. 安装svg-sprite-loader
安装命令:npm install svg-sprite-loader -D
2. 在assets文件夹中创建文件夹放置svg的文件以及配置文件
其中index.js的内容如下:
//index.js
const ctx = require.context("./svg", false, /\.svg$/);
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(ctx)
3. 在vue.config.js中配置
module.exports = defineConfig({}) 中添加
chainWebpack: config => {
config.module
.rule('svg')
.exclude.add(resolve('src/assets/icons/svg')) // 存放 svg 目录的目录
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons/svg')) // 存放 svg 目录的目录
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
},
4. 创建SvgIcon组件
在component 文件中创建SvgIcon.vue
<template>
<svg
:class="svgClass"
:style="{
width: size + 'px !important',
height: size + 'px !important',
color: color,
'margin-right': mr + 'rem',
}"
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: 20 }, // 图标尺寸
color: { type: String, default: "#fff" }, // 图标颜色
mr: { type: String, default: "20" }, // 图标颜色
},
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.15em;
fill: currentColor;
overflow: hidden;
}
</style>
5. 全局使用,在main.js 配置
import SvgIcon from '@/components/SvgIcon'
createApp(App).use(SvgIcon )
6. 使用SvgIcon组件
<svg-icon name="首页" :color="black" :mr="1" ></svg-icon>