vue项目引入svg图标

1、最开始是要下载包 npm install svg-sprite-loader
2、配置项目的配置文件 vue.config.js

const path = require("path");
function resolve(dir) {
 return path.join(__dirname, dir);
}
module.exports = {
 chainWebpack: config => {
   // set svg-sprite-loader
   // 清除配置
   // 注意：resolve()里面的路径，是要指向自己项目存放svg的文件夹；svg-sprite-loader里面的配置symbolId选项 没有配置的话 默认是文件的名称；
   config.module
     .rule('svg')  //找到svg-loader 
     .exclude.add(resolve('src/components/iconSvg/icons'))  //排除目录
     .end()
   // 添加配置
   config.module
     .rule('icons')
     .test(/\.svg$/)  //正则匹配 格式为 svg
     .include.add(resolve('src/components/iconSvg/icons')) //只对src/icon 目录生效  当前目录指向自己项目svg的文件夹
     .end()
     .use('svg-sprite-loader')  //注入插件svg-sprite-loader
     .loader('svg-sprite-loader')  //添加loader
     .options({    //配置为 icon-文件名
       symbolId: 'icon-[name]'
     })
     .end()
 },
};

3、新建svg的组件

// src/components/iconSvg/index.vue
<template>
 <svg :class="svgClass" aria-hidden="true">
   <use :xlink:href="iconName" :fill="iconColor"/>
 </svg>
</template>

<script>
/**
*   <svg-icon icon-class="set"></svg-icon>
*/
export default {
 name: "SvgIcon",
 props: {
   iconClass: {
     type: String,
     required: true
   },
   className: {
     type: String,
     default: ""
   },
   iconColor: {
     type: String,
     default: ""
   }
 },
 computed: {
   iconName() {
     return `#icon-${this.iconClass}`;  //跟svg-sprite-loader 生成的symbolId相对应上
   },
   svgClass() {
     if (this.className) {
       return "svg-icon " + this.className;  //自定义样式
     } else {
       return "svg-icon"; //默认样式
     }
   }
 },
};
</script>

<style scoped>
.svg-icon {
 width: 16px;
 height: 16px;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
   margin-right: 10px;
}
</style>

4、写svg引入的plugin src/plugins/iconsSvg.js

import iconSvg from "@/components/iconSvg"; // svg组件
 
export default {
  install: (app) => {
    // 注册全局组件
    app.component("iconSvg", iconSvg);
    const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
    const req = require.context("@/components/iconSvg/icons", false, /\.svg$/);
    requireAll(req); //相当于引入components/iconSvg/icons文件下的svg文件
  },
};

5、需要在 入口文件main.js 内引入

import { createApp } from "vue";
import App from "./App.vue";
// 引入自定义的svg icon
import iconsSvg from "@/plugins/iconsSvg.js";
 
const app = createApp(App);
app.use(iconsSvg)

6、页面使用

<icon-svg icon-class="dg" icon-color="#304056"></icon-svg>
 
// icon-class后面接的是相应icon文件夹下面svg的名称

• 注意：如果你使用的是vue2.0的话需要注意的是第四步第五步，
• 可以通过第四步引入vue进行全局注册，第五步只要引入相应的js就行，不用use

//第四步
import iconSvg from "@/components/iconSvg"; // svg组件
import vue from "vue";
// 注册全局组件
vue.component("iconSvg", iconSvg);
const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
const req = require.context("@/components/iconSvg/icons", false, /\.svg$/);
requireAll(req); //相当于引入components/iconSvg/icons文件下的svg文件
 
//第五步
import "@/plugins/iconsSvg.js";