vue2项目中引入svg图标

标签：index vue 文件 svg vue2 图标 svgIcon icon

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>

注意：iconClass 为对应 svg 的名称

5. 页面引用

<svg-icon :iconClass="'svgName'" :className="'SvgNameClass'" /> svgName                为svgName.svg 文件名 SvgNameClass      为当前svg-cion的类名

标签：index,vue,文件,svg,vue2,图标,svgIcon,icon
From： https://www.cnblogs.com/PengZhao-Mr/p/17603080.html