vue-cli3使用svg图标的详细步骤

1.安装依赖

npm install svg-sprite-loader -D

2.在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]"});},
}

在这里插入图片描述

3.在src下创建文件夹svgIcon,并在该文件夹下创建index.vue,index.js和svg文件夹

在这里插入图片描述

4. 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 的classif(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>

5. 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$/)   
/*    第一个参数是:'./svg' => 需要检索的目录，  第二个参数是：false => 是否检索子目录,第三个参数是: /.svg$/ => 匹配文件的正则
*/    
requireAll(req);

6.将 index.js导入到main.js中

在这里插入图片描述

7.使用，作为测试，我们先从阿里字体图标下载一个svg文件，放到svg文件夹下，如下图

(注：可以直接下载svg文件，改名为fullscreen.svg;也可以先创建fullscreen.svg文件，然后在阿里字体复制svg代码黏贴进去，效果是一样的)
在这里插入图片描述

然后我们再home.vue里使用

<template><div class="home"><svg-icon data_iconName="fullscreen" className="fullscreen_icon" /></div>    
</template><script>
export default {name: 'Home',
}
</script>