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文件，底下有代码可复制

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、在页面中使用

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

后来看文档解决问题

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

②页面正常引入就行了

和上面步骤一样。

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