自定义SvgIcon通用图标vue组件

安装svg插件

默认情况下vite无法处理svg矢量图标，需要安装vite插件

npm i --save-dev vite-plugin-svg-icons@latest

vite.config.js

// ...
import path, { join } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]'
    })
  ],
  // ...
})

main.js

// 在 main.js 中完成注册
import 'virtual:svg-icons-register'

• 在教程的开始处已经自动导入了图标，所以这里可以跳过
• 请注意自动导入方案的标签使用和平时有点不一样，正确使用例子：<i-ep-Close />

创建SvgIcon图标组件

src/components/SvgIcon.vue

<template>
  <div>
    <!-- 外部图标 -->
    <div
      v-if="isExternal"
      :style="styleExternalIcon"
      class="svg-external-icon svg-icon"
      :class="className"
    ></div>

    <!-- element-plus图标 -->
    <component v-else :is="iconComponent"></component>
  </div>
</template>

<script setup>
// 将图标全部注册进来（import后自动注册组件）
import * as Icons from '@element-plus/icons-vue'

import { computed } from 'vue'
const props = defineProps({
  // icon 图标
  icon: {
    type: String,
    required: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

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


// 如果是element-plus图标，将具体组件绑定到变量中。用于component标签使用。
let iconComponent = null
if (!isExternal.value) {
  iconComponent = Icons[props.icon]
} 

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




</script>


<script>
/**
 * 注意！
 * https://cn.vuejs.org/api/sfc-script-setup.html#using-components
 * 在 <script setup> 中要使用动态组件时，需要直接用 :is="Component" 直接绑定到组件本身，而不是字符串的组件名。
 * 如果想使用字符串绑定 :is="'DArrowRight'"，这里新建一个script标签并使用vue2语法导入组件。
 */

/*
import { DArrowRight, DArrowLeft, Search } from '@element-plus/icons-vue'
export default {
  components: { DArrowLeft, DArrowRight, Search }
}
*/
</script>

<style 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>

本章总结

到目前位置，一个基本的后台项目的框架已经搭建的差不多了，项目可以正常启动。