Vue3项目构建SVG图标库及动态调用组件的实现求助

现有代码问题分析 #

• 图标导出为纯 SVG 字符串，但调用时错误使用defineAsyncComponent尝试导入模块，两者逻辑不匹配
• klass属性类型定义矛盾：声明为Array但默认值是字符串，导致样式绑定失效
• BaseIcon 与底层组件的调用逻辑混乱，同时尝试动态组件渲染与v-html，均未正确处理 SVG 内容
• 未建立图标名称到对应 SVG 的映射关系，无法通过名称直接匹配目标图标

修正步骤 #

1. 统一图标库管理方式 #

创建图标映射文件@/icons/index.js，集中管理所有图标并修正原 SVG 代码的语法错误：

// @/icons/index.js
export const iconMap = {
  Login: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg>',
  // 按需添加其他图标
  // Home: '<svg ...></svg>'
}

注：原 SVG 代码存在重复stroke-width属性、CSS 语法误用为属性的问题，已同步修正。

2. 重构 BaseIcon 组件 #

直接基于图标映射实现名称到 SVG 的渲染，简化逻辑：

<!-- @/components/tools/base/BaseIcon.vue -->
<script setup>
import { iconMap } from '@/icons/index.js'
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
    // 校验名称是否存在于图标库
    validator: (value) => Object.keys(iconMap).includes(value)
  },
  klass: {
    type: [String, Array, Object],
    default: 'h-6 w-6'
  }
})

const svgContent = computed(() => iconMap[props.name])
</script>

<template>
  <div v-html="svgContent" :class="klass" aria-hidden="true"></div>
</template>

3. 正确调用组件 #

导入后通过name属性传入图标名称即可：

<script setup>
import BaseIcon from "@/components/tools/base/BaseIcon.vue";

const icon = 'Login'
const iconClass = 'h-8 w-8 text-blue-500'
</script>

<template>
  <BaseIcon v-if="icon" :name="icon" :klass="iconClass" />
</template>

可选优化：封装为 Vue 组件（支持交互） #

如果需要给 SVG 添加事件监听、动态修改属性，可将每个图标封装为独立 Vue 组件：

<!-- @/icons/LoginIcon.vue -->
<template>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
  </svg>
</template>

更新图标映射为组件集合：

// @/icons/index.js
import LoginIcon from './LoginIcon.vue'
// import HomeIcon from './HomeIcon.vue'

export const iconComponentMap = {
  Login: LoginIcon,
  // Home: HomeIcon
}

修改 BaseIcon 为动态组件渲染：

<!-- @/components/tools/base/BaseIcon.vue -->
<script setup>
import { iconComponentMap } from '@/icons/index.js'
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true,
    validator: (value) => Object.keys(iconComponentMap).includes(value)
  },
  klass: {
    type: [String, Array, Object],
    default: 'h-6 w-6'
  }
})

const IconComponent = computed(() => iconComponentMap[props.name])
</script>

<template>
  <component :is="IconComponent" :class="klass" />
</template>

调用方式保持不变，此方案支持给 SVG 添加点击事件、动态修改stroke等属性，扩展性更强。

内容的提问来源于stack exchange，提问作者Ahmad Ebrahimi