vue3中封装svg-icon组件

### 创建和使用自定义 SVG 图标组件

#### 配置 Vite 构建工具

为了简化开发流程并提高性能，在 `vite.config.js` 中配置插件来处理 SVG 文件：

import { resolve } from 'path';
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [resolve(process.cwd(), 'public/icons')], // 存放SVG文件的位置
      symbolId: 'icon-[dir]-[name]'                       // 定义symbol ID格式
    }),
  ],
});

此设置允许开发者通过简单的标签调用任何已注册的图标[^2]。

#### 编写全局 SVG 组件

创建名为 `SvgIcon.vue` 的单文件组件用于渲染动态传入名称对应的 SVG 路径数据:

<template>
  <svg :class="className">
    <use :xlink:href="`#${props.icon}`"></use>
  </svg>
</template>

<script setup lang="ts">
interface Props {
  icon?: string;
  className?: string;
}
const props = withDefaults(defineProps<Props>(), {
  icon: '',
  className: ''
})
</script>

上述代码片段展示了如何构建一个可重用且灵活的 SVG 显示容器，它接受两个属性参数——图标的唯一标识符以及额外样式类名[^1]。

#### 注册为全局组件

为了让整个应用程序都能方便地访问到这个新组建而无需每次都单独导入, 可以将其作为全局组件安装在应用入口处(main.ts 或 main.js):

// 导入 SvgIcon 组件
import SvgIcon from './components/SvgIcon.vue'

app.component('SvgIcon', SvgIcon);

这样做的好处是可以直接在模板里像 HTML 标签一样书写 `<SvgIcon>` 使用该组件。

#### 实际应用场景中的运用

当页面需要展示某个特定图标时只需简单声明即可实现预期效果：

<!-- 展示 home.svg -->
<SvgIcon icon="icon-home" class="custom-class"/>

这里的 `icon-home` 是由前面提到过的 `symbolId` 规则决定的具体实例化后的ID值；而附加的 CSS 类可用于进一步定制外观表现形式。