vue引入svg图片

一、很早之前做项目有使用到svg图片，一直没有记录，后来在百度发现没一个能用的，索性自己整理归纳一个

二、步骤

1、安装  svg-sprite-loader 

  npm install --save svg-sprite-loader

2、在vue.config.js中加入配置

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文件夹，svg文件夹里面放ui给的.svg文件，底下有代码可复制

<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>

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);

4、main.js中引入

import "@/svgIcon/index.js"

5、在页面中使用

<svg-icon data_iconName="user" className="download_user" />

6、追加！！！在vue3中使用上面的方式会报错：component is not defined

后来看文档解决问题

①vue3中：可以将svgIcon->下面的index.js删除  其他文件不变！和上面一样就行

②页面正常引入就行了

和上面步骤一样。

如果遇到dom出现，但是还看不到图标的情况重新npm run serve一下，就ok啦！！！