Vue3后台管理系统SVG图标

在Vue 3中，我们可以使用SVG图标的方式有多种，这里我们使用的是SVG Sprite的方式，这种方式可以帮助我们更好的管理和优化SVG图标。

首先，我们需要在项目中安装一个库，叫做svg-sprite-loader，这个库可以帮助我们把SVG图标作为一个sprite来进行管理。

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

然后，我们需要在vue.config.js中配置这个loader，以确保我们可以正确的加载SVG图标。

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

然后，我们需要创建一个用于存放SVG图标的文件夹，并且在这个文件夹中，我们需要创建一个index.js文件，这个文件会帮助我们导入所有的SVG图标，并且注册为Vue组件。

// src/icons/index.js
 
import { App } from 'vue'
import { resolve } from 'path'
import { readDirSync } from './utils'
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = (requireContext) => requireContext.keys().map(requireContext)
 
requireAll(req)
 
const install = (app) => {
  req.keys().forEach((key) => {
    const componentConfig = req(key)
    app.component(componentConfig.default.id.split('&')[1], componentConfig.default)
  })
}
 
export default { install }

在上面的代码中，我们使用了require.context来帮助我们导入./svg文件夹中的所有SVG图标文件。然后，我们通过遍历这些图标，把它们注册为Vue组件。

最后，我们需要在main.js中注册这个icons插件，以便所有的SVG图标都可以作为Vue组件来使用。

import { createApp } from 'vue'
import App from './App.vue'
import icons from './icons'
 
const app = createApp(App)
app.use(icons)
app.mount('#app')

现在，我们可以在任何组件中使用SVG图标了，只需要像使用普通组件一样使用它们即可。

<template>
  <div>
    <home-icon />
  </div>
</template>
 
<script>
import { defineComponent } from 'vue'
import HomeIcon fr