第一步需要下载插件svg-sprite-loader
cnpm i svg-sprite-loader --save
第二步需要写一个Svglcon的组件 (components/Svglcon)
<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: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步icons要和components在同一目录
icons/index
import Vue from "vue";
import SvgIcon from "@/components/SvgIcon"; // svg组件
// 注册全局组件
Vue.component("svg-icon", SvgIcon);
const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
const req = require.context("./svg", false, /\.svg$/);
requireAll(req);
第四步在mian.js中引入一下icons的文件,不然组件不生效
第五步就是使用了
<svg-icon icon-class="password"></svg-icon>
这样就可以了