vue3后台系统实战之图标

实战项目中多多少少会引用到图标，有外部图标也有内部图标，这时候该怎么办呢，封装，对的，封装一个图标组件，这样不管外部还是内部都可以解决，此篇以svg为例。

需要做一个判断，判断是否外部图标

validate.js

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

SvgIcon/SvgIndex.vue

<template>
    <!-- 外部图标 -->
    <div
      class="svg-external-icon svg-icon"
      v-if="isExternal"
      :style="styleExternalIcon"
      :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-repeat 50% 50%`,
  '-webkit-mask': `url(${props.icon}) no-repeat 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>

在页面中引用

<template>

<el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon="user" />
        </span>
        <el-input
          placeholder="username"
          name="username"
          type="text"
          v-model="loginForm.username"
        />
      </el-form-item>

</template>

<script setup>

import SvgIcon from '@/components/SvgIcon/SvgIndex.vue'

</script>

以上为外部svg，下面讲讲内部svg的引用

首先把所有的内部svg放在一个文件夹中，例如src/icons/svg

然后创建一个和svg同级的index.js，index.js的内容如下：

import SvgIcon from '@/components/SvgIcon/SvgIndex'

// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
const svgRequire = require.context('./svg', false, /\.svg$/)
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))

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

//此app对应mian.ts里面的const app = createApp(App)

在main.ts中引用

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

此时页面中就不需要引用svgIcon组件了

这时候你会发现svg图标还是没法使用，是因为需要下载svg-sprite-loader，下载好以后在vue.config.js中引入以下配置：

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
// https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
module.exports = {
  //webpack devServer 提供代理的功能
  chainWebpack(config) {
    // 设置 svg-sprite-loader
    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()
  }
}

到此引入图标就结束啦！