- vue-cli3
- 第一次使用成功就是根据 这篇文章，为了防止链接找不到，记录一份
- 使用这种方式，图标可以更容易维护
- 安装依赖
npm install svg-sprite-loader -D
- vue.config.js中添加配置
module.exports={
chainWebpack: config => {
const svgRule = config.module.rule("svg");
svgRule.uses.clear();
svgRule
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
.options({
symbolId: "icon-[name]"
});
},
}
-
在src目录下创建svgIcon文件夹，并在svgIcon文件夹下创建index.vue文件和index.js文件以及svg文件夹
文件目录 - 编写index.vue文件内容
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
export default {
name:'svgIcon',
props:{
data_iconName:{
type:String,
required:true
},
className:{
type:String,
default:''
}
},
computed:{
svgClass(){ //svg 的class
if(this.className){
return `svg-icon ${this.className}`;
}else{
return 'svg-icon'
}
},
iconName(){ //svg xlink-href 指向的文件名
return `#icon-${this.data_iconName}`;
}
}
}
</script>
<style scoped>
.svg-icon{
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 编写index.js文件内容
import Vue from "vue"
import svgIcon from "./index.vue"
Vue.component('svg-icon',svgIcon) //挂载全局组件
//下面这个是导入svgIcon/svg下的所有svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /.svg$/)
requireAll(req);
- 将index.js导入到main.js中
import "@/SvgIcon/index.js"
-
使用：从iconfont字体图标库下载一个svg图标，放到svg文件夹下
可以直接下载svg文件，改名为fullscreen.svg;也可以先创建fullscreen.svg文件，然后在阿里字体复制svg代码黏贴进去，效果是一样的
示例
<template>
<div>
<svg-icon data_iconName="home" class="home_icon"/>
</div>
</template>
home对应svg文件夹下的svg图标
8. 效果
效果截图
页面展示
记录完毕！
