Vue3 引入 svg 图标

概述

在 Vue 3 项目中使用并封装 SVG 图标组件，尤其是结合 Vite 构建工具，可以遵循以下步骤进行操作。这里假设你希望实现一个灵活且易于维护的 SVG 图标系统。

安装依赖

安装处理 SVG 图标的 Vite 插件。vite-plugin-svg-icons 是一个常用的选项，可以帮助你自动导入和处理 SVG 文件。

E:\learning\vue3\vue3>pnpm install vite-plugin-svg-icons -D          
Packages: +163
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1087, reused 886, downloaded 163, added 163, done
node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild: Running postinstall script, done in 513ms

devDependencies:
+ vite-plugin-svg-icons 2.0.1

Done in 33s

配置 vite.config.ts

增加 vite.config.ts 文件中配置这个插件。这通常涉及导入插件并将其添加到 Vite 的配置对象中的 plugins 数组内。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

修改 main.ts

修改 main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
// svg插件需要配置代码
import 'virtual:svg-icons-register'
const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

封装组件 svg-icon.vue

如果你想要一个更定制化的图标组件，可以创建一个 svg-icon.vue 文件来封装图标逻辑。这个组件可以根据传入的图标名称动态加载对应的 SVG

<template>
    <svg aria-hidden="true">
      <use :href="symbolId" :fill="color" />
    </svg>
  </template>
  
  <script>
  import { defineComponent, computed } from 'vue'
  
  export default defineComponent({
    name: 'SvgIcon',
    props: {
      prefix: {
        type: String,
        default: 'icon',
      },
      name: {
        type: String,
        required: true,
      },
      color: {
        type: String,
        default: '#333',
      },
    },
    setup(props) {
      const symbolId = computed(() => `#${props.prefix}-${props.name}`)
      return { symbolId }
    },
  })
  </script>

创建文件夹

# 文件夹名称
src/icons

# 文件列表
little.svg
normal.svg

App.vue

在配置和组件准备就绪后，你可以在项目中的任何 Vue 组件里直接使用这些图标。

<script setup lang="ts">
import SvgIcon from "./components/svg-icon.vue"
</script>

<template>
  <svg-icon name="normal" />
  <svg-icon name="little" />
</template>

这里的 name 属性值应与你的 SVG 文件名匹配（不包括 .svg 扩展名），且应符合你在 vite.config.ts 中配置的 symbolId 规则。

结果

结语

通过上述步骤，你不仅能够有效地在 Vue 3 项目中集成 SVG 图标，还能享受到封装组件带来的便利性和可维护性。这种做法不仅简化了图标的使用过程，减少了代码重复，还使得图标的管理和更新变得集中且高效。无论是从阿里图标库还是其他来源获取 SVG，你现在都能够轻松地将它们融入到你的应用界面设计之中。

记住，良好的文件组织结构、清晰的命名约定以及适时的文档记录，都是项目长期健康发展的重要保障。随着项目的演进，持续优化图标管理流程，比如利用自动化工具进一步提升开发效率，也是值得探索的方向。

总之，通过封装 SVG 图标组件，你已经为你的 Vue 3 项目注入了更加灵活美观的视觉元素，也为未来可能的扩展和迭代打下了坚实的基础。继续享受开发的乐趣，创造更多令人愉悦的用户界面吧！