#Vue项目中使用Svg矢量图标
使用npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进行安装下载在components目录下新建一个SvgIcon.veu组件，代码如下图
<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" /></svg></template><script>/*** 使用栗子* <svg-icon icon-class="set"></svg-icon>*/export default {name: "SvgIcon",props: {iconClass: {type: String,required: true},className: {type: String,default: ""}},computed: {iconName() {return `#icon-${this.iconClass}`;},svgClass() {if (this.className) {return "svg-icon " + this.className;} else {return "svg-icon";}}}};</script><style scoped>.svg-icon {width: 16px;height: 16px;vertical-align: -0.15em;fill: currentColor;overflow: hidden;margin-right: 10px;}</style>
然后需要新建icons目录，与components目录同级
## icons / index.js代码如下
import Vue from "vue";import SvgIcon from "@/components/SvgIcon"; // svg组件// 注册全局组件ponent("svg-icon", SvgIcon);const requireAll = reqireContext => reqireContext.keys().map(reqireContext);const req = require.context("./svg", false, /\.svg$/);requireAll(req);
需要在main.js中进行引用 icons/index.js 我使用的是vue-cli3以上版本，所以在项目中新建vue.config.js，进行配置svg组件（我刚开始没有在vue.config.js中配置，使用svg时，页面没有生效）
chainWebpack: config => {// set svg-sprite-loaderconfig.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]'}).end()
最后，在页面进行使用svg图标，这样就完全配置好了
<svg-icon icon-class=" "></svg-icon>
