vue3封装svg图标组件（vite）

** 第一种很久了，版本应该已经不对了，会报错了

封装SvgIcon组件目的：

使用本地svg图标、使用线上svg图标

使用示例：

一、新建SvgIcon组件
1.在components下新建SvgIcon文件夹并在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 { defineProps, computed } from 'vue'
const props = defineProps({
  // icon 图标
  icon: {
    type: String,
    required: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

/**
 * 判断当前图标是否为外部图标
 */
function external(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

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>

二、
1.在iconfont上选择需要的icon，选择svg下载（存放目录如上图所示）
2.在src文件夹下新建icons文件，并在icons文件夹下新建svg（用于存放svg）并在icons文件夹下新建index.js用于导入和导出svg
3.在index.js中导入导出svg

import SvgIcon from '@/components/SvgIcon'
// 1. 导入所有的 svg 图标
// require.context 帮助文档：https://webpack.docschina.org/guides/dependency-management/#requirecontext

// 你还可以通过 require.context() 函数来创建自己的 context。

// 可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

// 1.1. 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
const svgRequire = require.context('./svg', false, /\.svg$/)
// 1.2. 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
console.log(svgRequire.keys())
svgRequire.keys().forEach((svgIcon) => {
  // 1.3. 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
  svgRequire(svgIcon)
})
// 2. 完成 SvgIcon 的全局注册
export default (app) => {
  app.component('svg-icon', SvgIcon)
}

4.在main.js中导入并传入app参数

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入初始化样式表
import '@/styles/index.scss'
// 导入 svgIcon
import installIcons from '@/icons'       // 1.这行

const app = createApp(App)

app.use(ElementPlus)
installIcons(app)		// 2.这行
app.use(store)
app.use(router)
app.mount('#app')

5.使用svg-sprite-loader处理svg图标（此时页面不显示图标，需要下载插件然后配置vue.config.js）

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

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 = {
  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()
  }
}

如有问题，还请指正

最近学习还遇到另一种导入svg的方式
具体如下
1.在src目录下新建以下文件夹及文件：目录如下

将下载好的svg图标放入icons文件夹中保存
src/libs/svg-icon文件内容如下

<template>
  <svg aria-hidden="true">
    <use :class="fillClass" :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

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

const props = defineProps({
  // 显示的 svg 图标名称（剔除 icon-）
  name: {
    type: String,
    required: true
  },
  // 直接指定 svg 图标的颜色
  color: {
    type: String
  },
  // 通过 tailwind 指定 svg 颜色的类名
  fillClass: {
    type: String
  }
})
// 真实显示的 svg 图标名（拼接 #icon-）
const symbolId = computed(() => `#icon-${props.name}`)
</script>

src/libs/index.js文件内容如下

import svgIcon from './svg-icon/index.vue'

export default {
    install (app) {
        app.component('m-svg-icon', svgIcon)
    }
}

2.在main.js引入src/libs/index并进行注册

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { useREM } from './utils/flexible'
import mLibs from './libs' // ===================这行1
import './styles/index.scss'
// 注册 svg-icons
import 'virtual:svg-icons-register' // ===================这行2（后面安装插件vite-plugin-svg-icons需要用到）

useREM()
createApp(App).use(router).use(mLibs).mount('#app') // =============还有这里的 use(mLibs)3

3.下载插件npm i --save-dev vite-plugin-svg-icons
4.在vite.config.vue文件中使用vite-plugin-svg-icons

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { join } from 'path' // 引入 path ================= 这行 1
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // ==================这行 2

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({ // ========================== 这行 3
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定 symbolId 的格式
      symbolId: 'icon-[name]'
    })
  ],
  // 指定软链接
  resolve: {
    alias: {
      '@': join(__dirname, '/src')
    }
  },
  server: {
    // 代理配置
    proxy: {
      //  代理所有 /api 的请求
      '/api': {
        //  代理请求之后的代理地址
        target: '',
        //  跨域配置
        changeOrigin: true
      }
    }
  }
})

使用： .vue文件中直接使用

	<m-svg-icon class="" name="hamburger" color="#f46" fillClass="colorClass"></m-svg-icon>