VUE项目中引人SVG

准备工作：

  VUE  =>  ^2.5.2

  WEBPACK =>  ^3.6.0

1. 第一步  webpack.base.conf.js

配置对应的loader

 1       {
 2         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 3         loader: 'url-loader',
 4         exclude: [resolve('src/icons')],
 5         options: {
 6           limit: 10000,
 7           name: utils.assetsPath('img/[name].[hash:7].[ext]')
 8         }
 9       },
10       {
11         test: /\.svg$/,
12         loader: "svg-sprite-loader",
13         include: [resolve('src/icons')],
14         options: {
15           symbolId: "icon-[name]"
16         }
17       }

2.第二步 写SvgIcon组件

业务组件下svg文件夹下

 1 <template>
 2   <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
 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 lang="scss" scoped>
36 .svg-icon {
37   width: 1em;
38   height: 1em;
39   vertical-align: -0.15em;
40   fill: currentColor;
41   overflow: hidden;
42 }
43 
44 </style>

3.第三步 把组件挂载到全局

icons 文件夹下的index,js 文件

1 import Vue from 'vue'
2 import SvgIcon from '@/business-components/svg/SvgIcon'// svg组件
3  
4 // register globally
5 Vue.component('svg-icon', SvgIcon)
6  
7 const req = require.context('./svg', false, /\.svg$/)
8 const requireAll = requireContext => requireContext.keys().map(requireContext)
9 requireAll(req)

4.第四步 mian.js引入

import './icons';

 

posted @ 2020-12-02 13:38  等风来灬  阅读(72)  评论(0)  编辑  收藏  举报