自定义SvgIcon公用组件

前言

因为项目中有很多地方需要用到字体svg图标，而项目中使用了很多不同来源的字体图标导致维护很麻烦，每一次需要新添加字体图标的时候就会有很麻烦的操作，因此想开发一个svg组件优化一下字体图标的引入，只需要将要引入svg文件放入指定文件夹中，然后通过svg组件绑定文件名称，就可以达到引用字体图标的目的。

1.安装loader

要处理svg文件，需要要svg-sprite-loader，解析svg，因为是只在开发时需要解析，因此加上后缀 --save-dev或者-D。

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

2.使用svg-sprite-loader

在vue.config.js中去除旧的svg规则，然后添加新的svg规则

const path = require('path')  //因为引入svg文件时需要获取文件路径，因此需要引入path  module.exports = {    chainWebpack: config => {        config.module        .rule('svg')        .exclude        .add(path.join(dirname, 'src/assets/icons'))         .end()       config.module        .rule('icons')        .test(/.svg$/)        .include        .add(path.join(dirname, 'src/assets/icons'))         .end()         .use('svg-sprite-loader')         .loader('svg-sprite-loader')        .options({ symbolId: 'icon-[name]' })          .end()   } } 

3.创建SvgIcon组件

这个组件将会是一个公用组件，可以在很多项目中使用，因此建议放在公用组件文件夹中

//此组件接收一个必传的参数name：svg文件的名称 <template>     <svg class="svg-icon" aria-hidden="true">         <use :xlink:href="`#icon-${name}`" />     </svg> </template> <script> export default {   name: 'SvgIcon',   props: {     name: { // svg文件名称       type: String,       required: true     }   } } </script> <style scoped> .svg-icon {   width: 1em;   height: 1em;   vertical-align: -0.15em;   fill: currentColor;   overflow: hidden; } </style>  

4.注册SvgIcon组件

组件注册可以全局注册，也可以局部注册，鉴于有很多组件和页面都要使用它，因此这里选择全局注册

// main.js 中   引入SvgIcon组件，全局注册SvgIcon组件 import SvgIcon from '@/base-ui/svgIcon/SvgIcon.vue' Vue.component('svg-icon', SvgIcon)  

5.引入svg资源

使用require.context(directory,useSubdirectories,regExp) 工具函数将文件夹所有后缀是svg的资源文件引入。

// require.context(directory,useSubdirectories,regExp) // 1.directory :检索目录 //2.useSubdirectories：是否检索该目录下的字文件夹，true：检索，false：不检索 //3.regExp:匹配文件的正则表达式,一般是文件名  

require.context(directory,useSubdirectories,regExp)返回一个函数，它的原型上有1个id属性2个方法：

• 1：id，
• 2：keys（）这是已个函数，调用可以得到匹配到的文件名数组
• 3：resolve（req） 这是一个函数，接受一个参数，返回文件资源的路径
  

//main.js  // 1. 引入SvgIcon组件，全局注册Svg Icon组件 import SvgIcon from '@/base-ui/svgIcon/SvgIcon.vue' Vue.component('svg-icon', SvgIcon) // 2. 载入所有svg icon const requireContext = require.context('./assets/icons', false, /.svg$/) requireContext.keys().forEach(requireContext)  

6.使用效果

图中svg来自阿里巴巴矢量图,注意在下载的时候记得去掉svg图标的颜色，这样才可以修改图标的颜色。