vue2项目中引入svg图标-526互联

vue 版本 vue: "^2.6.11"

1. 下载对应的svg 依赖

npm install svg-sprite-loader --save-dev

2. 创建svgIcon 文件夹

文件夹下对应3个文件

svg 文件夹：存放svg 文件

index.js 文件：vue 挂载svg

index.vue文件：封装的svg文件

3. index.js 文件

全局挂载到vue上

1 import Vue from "vue";
2 import svgIcon from "./index.vue";
3 
4 Vue.component('svg-icon', svgIcon)  //挂载全局组件
5 //下面这个是导入svgIcon/svg下的所有svg文件
6 const requireAll = requireContext => requireContext.keys().map(requireContext)
7 const req = require.context('./svg', false, /\.svg$/)
8 requireAll(req);

4. index.vue文件

 1 <template>
 2   <svg :class="svgClass" aria-hidden="true">
 3     <use :xlink:href="iconName" />
 4   </svg>
 5 </template>
 6   
 7   <script>
 8 export default {
 9   name: "SvgIcon",
10   props: {
11     iconClass: {
12       type: String,
13       required: true,
14     },
15     className: {
16       type: String,
17       default: "",
18     },
19   },
20   computed: {
21     iconName() {
22       return `#icon-${this.iconClass}`;
23     },
24     svgClass() {
25       if (this.className) {
26         return "svg-icon " + this.className;
27       } else {
28         return "svg-icon";
29       }
30     },
31   },
32 };
33 </script>
34   
35   <style scoped>
36 .svg-icon {
37   width: 1em;
38   height: 1em;
39   vertical-align: -0.15em;
40   fill: currentColor;
41   overflow: hidden;
42 }
43 </style>