vue3 webpack项目中svg图标处理方案

目录结构

背景：
在我们的项目中所使用的 icon 图标，一共分为两类：
1、element-ui等第三方组件库icon
2、自定义的 svg 图标

对于element-plus的图标我们可以直接通过 el-icon 来显示，但是自定义图标的话，我们暂时还缺少新显示的方式，所以说我们需要一个自定义的组件，来显示我们自定义的 svg 图标

那么这种自定义组件处理 自定义 svg 图标的形式，就是我们在面临这种问题时的通用解决方案

那么对于这个组件的话，他就需要拥有两种能力
1、显示外部的svg图标（http外链）
2、显示项目内的svg图标

基于以上概念，我们可以创建出以下对应代码：

封装通用组件

• 1、创建 components/SvgIcon/index.vue:

<template>
  <!-- 展示外部图标 -->
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    :class="className"
  ></div>
  <!-- 展示内部图标 -->
  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
import { isExternal as external } from '@/utils/validate'
import { defineProps, computed } from 'vue'
const props = defineProps({
  // icon 图标
  icon: {
    type: String,
    required: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

/**
 * 判断当前图标是否为外部图标
 */
const isExternal = computed(() => external(props.icon))
/**
 * 外部图标样式
 */
const styleExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repat 50% 50%`,
  '-webkit-mask': `url(${props.icon}) no-repat 50% 50%`
}))
/**
 * 内部图标
 */
const iconName = computed(() => `#icon-${props.icon}`)
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

• 2、创建utils/validdate.js:

/**
 * 判断是否为外部资源
 * @param {*} path
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

• 3、使用(这里还需要单独局部引入，看下面写完就不需要单独引入，直接可以使用了)

<sapn class="svg-container">
	<svg-icon icon="https://xxxx.svg"></svg-icon>
</span>

处理内部图标（本地svg）

• 1、在src根目录下创建icons文件夹，在icons下创建index.js文件，该文件中需要完成两件事：
  * 1-1、导入所有的svg图标
  * 2-2、完成SvgIcon的全局注册
• 2、index.js中

// 1.导入所有的svg 图标
// 2.完成SvgIcon 的全局注册
import SvgIcon from '@/components/SvgIcon'
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此时返回了一个 require函数（svgRequire），可以接收一个 request的参数，用于require的导入
// 该函数提供了三个属性，可以通过 svgRequire.keys() 获得所有的 svg 图标
// 遍历图标，把图标作为 request 参数传入到 svgRequire 导入函数中，完成本地svg 图标的导入
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon))

export default (app) => {
  app.component('svg-icon', SvgIcon)
}

• 3、main.js中完成全局注册

// 导入 svgIcon
import installIcons from '@/icons'
const app = createApp(App)
installIcons(app)

• 4、使用本地图标，直接传icon名称

<sapn class="svg-container">
	<svg-icon icon="password"></svg-icon>
</span>

使用svg-sprite-loader处理svg图标

做到上面你会发现本地图标还无法展示，这是因为我们还需要处理一下
svg-sprite-loader 是 webpack 中专门用来处理 svg 图标的一个loader

• 1、下载该loader

npm i --save-dev svg-sprite-loader@6.0.9

• 2、在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) {
    config.module.rule('svg').exclude.add(resolve('src/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
})

效果