Vue项⽬中使⽤Svg⽮量图标
#Vue项⽬中使⽤Svg⽮量图标
1. 使⽤npm install svg-sprite-loader –save命令或 cnpm install svg-sprite-loader –save命令进⾏安装下载
2. 在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>
3. 然后需要新建icons⽬录，与components⽬录同级
## icons / index.js代码如下
import Vue from"vue";
import SvgIcon from"@/components/SvgIcon";// svg组件
// 注册全局组件
Vueponent("svg-icon", SvgIcon);
const requireAll= reqireContext => reqireContext.keys().map(reqireContext);
const req = t("./svg",false,/\.svg$/);
icon图标库requireAll(req);
4. 需要在main.js中进⾏引⽤ icons/index.js
5. 我使⽤的是vue-cli3以上版本，所以在项⽬中新建fig.js，进⾏配置svg组件（我刚开始没有在fig.js中配置，使⽤svg
时，页⾯没有⽣效）
chainWebpack: config =>{
// set svg-sprite-loader
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId:'icon-[name]'
})
.end()
6. 最后，在页⾯进⾏使⽤svg图标，这样就完全配置好了
<svg-icon icon-class=" "></svg-icon>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。