iconfont-阿里巴巴矢量图标svg版本的使用方式（Vue）

几多
10,566 阅读4分钟

实现背景

  • 阿里巴巴矢量图标库地址：www.iconfont.cn/
  • iconfont字体相信大家项目中基本都用到过，自己之前使用的方式一直是下载到本地，解压得到一个类似于这样的文件夹内容

image.png 然后在页面中按照给的示例中引入对应的css，然后再在页面中使用

image.png

  • 思考 这种方式引用，操作简单，但是存在的短板，假设这样一个场景，在开发的过程中，下载了自己需要的iconfont图标，后期开发的过程中发现需要增加新的iconfont图标，则需要重新操作一遍，并替换掉自己项目里的/src/assets/iconfont文件夹里的内容

SVG的方式使用iconfont图标

  • 想实现的目标

image.png

如上图所示，需要使用到哪个图标，我可以直接复制svg代码放到本地，并自定义命名图标名称，页面可以实时更新我新下载并使用的svg图标，而不用重复下载替换项目里原有的文件夹。

image.png

  • 说明：这里只是思考另一种实现方式，这里用作笔记备份，还希望能得到大佬指点一二，话不多说，下面开始实现

  • 脚手架版本和vue版本

image.png

  • 首先我的目录结构是这样的，会新建个icons/svg文件夹，用于存放svg格式的iconfont

image.png

  • 使用svg方式使用iconfont图标，需要用到自定义配置规则和svg-sprite-loader 我们可以用命令行npm i svg-sprite-loader -D (将import进来的图标打包到库里 将来直接引用图标的id)，在vue.config.js里配chainWebpack,vue-cli中提供命令行vue inspect 帮助快速审查webpack配置，我们需要做的有两步
      1. 阻止svg规则加载icons/svg中的图标（要使用自己的配置）
      1. 配置svg-sprite-loader仅加载icons/svg中的图标
  • vue.config.js里的配置代码附在文章结尾

image.png

image.png

  • 配置完成后可以在自己页面上引用svg图标了，symbolId对应着你的iconfont图标的文件名

image.png

  • 使用效果

1643184912712.png

svg-sprite-loader所做的事，把加载的文件当成一个库

  • 由我截图上的使用方式看到，未经封装的svg版本iconfont使用起来还是有些繁琐，需要在使用的页面上手动引入图标地址和使用svg标签语法
<svg>
    <use xlink:href="#icon-sharpicons"></use>
</svg>
  • 为了更好的在项目中使用，所以把svg使用封装程组件SvgIcon.vue
<template>
<!-- 当组件的根元素不具备一些DOM事件，但是根元素内部元素具备相对应的DOM事件，那么可以使用$listeners获取父组件传递进来的所有事件函数，再通过v-on="xxxx"绑定到相对应的内部元素上即可。 -->
  <svg :class="svgClass" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: "",
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;
      } else {
        return "svg-icon";
      }
    },
  },
};
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

配置自动加载svg中所有的图标index.js，并全局注册组件Vue.component('SvgIcon', SvgIcon),文件位置如下

image.png

index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
// 自动加载svg中所有的图标
// context返回一个指定目录的加载方法,是否要递归,匹配的后缀名
const req = require.context('./svg', false, /\.svg$/) // webpack方法
// keys() 返回指定上下文中所有匹配文件名称
req.keys().forEach(item => req(item)) // 遍历所有文件名并require自动加载
console.log(req)
console.log(req.keys())
// req.keys().map(req)

// 注册svg-icon组件
Vue.component('SvgIcon', SvgIcon)

在main.js里自动挂载

image.png

到此步，使用svg版本的iconfont的配置封装工作已经完成

使用

  • 封装完成后，我们可以只传入icon-class="xxx"来使用，xxx为你命名的svg图标的文件名 image.png
<router-link to="/">
    <!-- 封装后 -->
    <SvgIcon icon-class="sharpicons"></SvgIcon>
    Home</router-link> |
    <router-link to="/about">
    <SvgIcon icon-class="qingning"></SvgIcon>
About</router-link>
  • 使用效果

image.png

总结

  • 至此，使用svg方式配置iconfont图标功能已实现完成，相对于传统的每次新增iconfont图标都要替换掉项目里文件，此种方式可以直接复制svg代码到本地，然后可以直接在页面上展示，省略了重复替代文件夹的工作，两种方式各有好处吧，文章如有不足之处还望大佬指正😊

附录

  • vue.config.js代码，svg配置用到了配置项chainWebpack里内容
const path = require('path')
const selfResolve = (dir) => path.resolve(__dirname, dir)
module.exports = {
  // publicPath: '/test',
  devServer: {
    port: 8888
  },
  // webpack基础配置
  /* configureWebpack: {
    resolve: {
      alias: {
        comps: path.join(__dirname, 'src/components'), // 配置别名
      }
    }
  }, */
  configureWebpack(config) {
    // 根据执行环境做不同的配置
    if (process.env.NODE_ENV === 'development') { // npm run serve -->development
      config.name = 'Vue最佳实践'
    } else { // run build 生成压缩文件
      config.name = 'Vue best Practive'
    }
  },
  chainWebpack(config) {
    config.resolve.alias
    .set('comps', selfResolve('src/components')) // 配置别名)
    .set('@', selfResolve('src'))
    // npm i svg-sprite-loader -D 将import进来的图标打包到库里 将来直接引用图标的id
    // vue inspect 帮助快速审查webpack配置
    // vue inspect --rules 查看规则
    // vue inspect --rule svg 查看svg配置
    // 1. 阻止svg规则加载icons/svg中的图标
    config.module.rule('svg')
      .exclude.add(selfResolve('src/icons'))
    
    // 2. 配置svg-sprite-loader仅加载icons/svg中的图标
    config.module.rule('icons') // 规则存在就查询，不存在就创建
      .test(/\.svg$/) // 仿照vue inspect --rule svg 审查语法来写 所有以svg结尾的import使用这个规则
      .include.add(selfResolve('src/icons'))
      .end() // 找回this上下文 -- 当前的icons规则
      .use('svg-sprite-loader') // 先use再loader
        .loader('svg-sprite-loader')
          .options({symbolId: 'icon-[name]'}) // 使用图标的方式 icon-文件名
  }
}
avatar
文章
阅读
粉丝