自定义SvgIcon公用组件

发布时间：2022-08-10 文章分类：编程知识 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

前言

因为项目中有很多地方需要用到字体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="https://www.cnblogs.com/yangtao-s/p/`#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个方法：

//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图标的颜色，这样才可以修改图标的颜色。

自定义SvgIcon公用组件

标签 , , , ,