路由配置中的svg图标如何匹配

Strawberry_rabbit2025-10-11 10:13

首先需要安装 vite-plugin-svg-icons 和fast-blob 连个插件

js 复制代码

npm install vite-plugin-svg-icons -D
npm install fast-glob -D

在路由配置中设置的图标名称（如 icon-admin）是通过以下流程找到并显示的：

路由配置阶段 ：在 router/index.js 中，通过 meta: { icon: 'icon-admin' } 为路由配置图标名称。
侧边栏组件渲染 ：路由信息会传递到侧边栏组件 Sidebar/index.vue，该组件使用 <svg-icon> 组件并通过 :icon-class="getIcon(icon)" 属性绑定图标名称。
SvgIcon 组件处理 ：在 components/SvgIcon/index.vue 中，组件接收 iconClass 属性，并通过计算属性将其转换为 SVG 引用路径：
javascript 复制代码
```
iconName: computed(() => `#icon-${props.iconClass}`)
```
图标加载与注册 ：在 main.js 中配置了图标系统：
- 通过 import 'virtual:svg-icons-register' 注册 SVG 图标
- 通过 import '@/assets/icons/iconfont.css' 导入自定义字体图标
- 通过 app.component('svg-icon', SvgIcon) 全局注册 SvgIcon 组件
图标显示机制：当页面渲染时，SvgIcon 组件会生成包含正确引用路径的 SVG 元素：
ini 复制代码
```
<svg class="svg-icon" aria-hidden="true">
  <use xlink:href="#icon-bic-admin" fill="" />
</svg>
```

这样，路由配置中的图标名称就能够正确映射到项目中注册的 SVG 图标或字体图标，并在侧边栏中显示出来。

fast-glob 是一个高性能的文件系统路径匹配库，主要用于快速查找和匹配文件系统中的文件。它是 Node.js 生态系统中广泛使用的工具库，提供了比原生 glob 更高效的文件匹配能力。