Vue2中使用svg图标

• 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. 效果

效果截图
页面展示

记录完毕！