Icon 图标处理方案

在日常项目开发和学习中，我们可能会用到很多的图标icon，这些可能来自组件库，如vant、element-plus、也有可能来自线上的图标或者自定义的svg等。由此，我们可以封装一个通用的icon图标组件去处理日常图标使用的问题。

那么对于这个组件的话，它就需要拥有两种能力：

1. 显示外部 svg 图标
2. 显示项目内的 svg 图标

（1）svgicon.js

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon" :class="className"></div>
  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  // icon图标
  icon: {
    type: String,
    require: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

/**
 * 判断是否为外部图标
 */
const isExternal = computed(() => {
  return /^(https?:|mailto:|tel:)/.test(props.icon)
})

/**
 * 外部图标样式
 */
const styleExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repeat 50% 50%`,
  '-webkit-mask': `url(${props.icon}) no-repeat 50% 50%`
}))

/**
 * 项目内图标
 */
const iconName = computed(() => `#icon-${props.icon}`)
</script>

<style lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: black;
  mask-size: cover !important;
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>

\

（2）处理外部 svg 图标显示

<template>
  <div class="home">
    <span class="svg-container">
      <svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
      <svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
      <svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
      <svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
      <svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
    </span>
  </div>
</template>

<script setup>
import SvgIcon from '../components/SvgIcon'
</script>

如果我们使用线上图标，可以直接传递线上图标网址，如下引用外部图标成功：

（3）处理内部 svg 图标显示

SvgIcon 组件用于显示 非 Element-ui 的图标。但是目前我们只处理了 外部 svg 的图标展示，内部的图标还无法展示。

如果我们想处理内部图标的显示，可以这样去做：

1. 导入所有的 本地svg 图标
2. 完成 SvgIcon 的全局注册

如下图所示：

我们可以在index.js文件中编写，完成本地svg图标的导入和svgicon组件的全局注册

import SvgIcon from '@/components/SvgIcon'
/**
 * 通过 require.context() 函数来创建自己的 context
 * 该函数提供了三个属性，可以给这个函数传入三个参数：
 * 第一个参数为搜索的目录，
 * 第二个参数为标记表示是否还搜索其子目录，
 * 第三个参数为匹配文件的正则表达式。
 */
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
const svgRequire = require.context('./svg', false, /.svg$/)
// 可以通过 require.keys() 获取到所有的 svg 图标，
//forEach遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))
console.log('svgicons=>', svgRequire.keys())

// 完成全局组件的注册
export default app => {
  app.component('svg-icon', SvgIcon)
}

如此，我们就完成了svgIcon的全局注册。

（4）svg-sprite-loader 处理 svg 图标

svg-sprite-loader 是 webpack 中专门用来处理 svg 图标的一个 loader，

下载该 laoder

yarn add svg-sprite-loader -S

vue.config.js 文件，新增如下配置

const { defineConfig } = require('@vue/cli-service')

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  chainWebpack(config) {
    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
    config.module
      // 规则
      .rule('icons')
      // 正则，解析 .svg 格式文件
      .test(/.svg$/)
      // 解析的文件
      .include.add(resolve('src/assets/icons'))
      // 结束
      .end()
      // 新增了一个解析的loader
      .use('svg-sprite-loader')
      // 具体的loader
      .loader('svg-sprite-loader')
      // loader 的配置
      .options({
        symbolId: 'icon-[name]'
      })
      // 结束
      .end()
  },
  transpileDependencies: true
})

我们可以在测试文件里使用内部SVG图标，如下：

// 用户名   
<svg-icon icon="user" />
// 密码
<svg-icon icon="password" />
// 眼睛
<svg-icon icon="eye" />

运行效果如下：