### 创建和使用自定义 SVG 图标
组件
#### 配置 Vite 构建工具
为了简化开发流程并提高性能，在 `vite.config.js` 中配置插件来处理 SVG 文件：
```javascript
import { resolve } from 'path';
import { createSvg
IconsPlugin } from 'vite
-plugin
-svg
-icons';
export default defineConfig
({
plugins: [
vue(),
createSvg
IconsPlugin
({
iconDirs: [resolve
(process.cwd
(), 'public/
icons'
)], // 存放SVG文件的位置
symbolId: '
icon-[dir]
-[name]' // 定义symbol ID格式
}
),
],
}
);
```
此设置允许开发者通过简单的标签调用任何已注册的图标[^2]。
#### 编写全局 SVG
组件
创建名为 `Svg
Icon.
vue` 的单文件
组件用于渲染动态传入名称对应的 SVG 路径数据:
```
vue
<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
):
```typescript
// 导入 Svg
Icon 组件
import Svg
Icon from './components/Svg
Icon.
vue'
app.component
('Svg
Icon', Svg
Icon);
```
这样做的好处是可以直接在模板里像 HTML 标签一样书写 `<Svg
Icon>` 使用该
组件。
#### 实际应用场景中的运用
当页面需要展示某个特定图标时只需简单声明即可实现预期效果：
```html
<!
-- 展示 home.svg
-->
<Svg
Icon icon="
icon-home" class="custom
-class"/>
```
这里的 `
icon-home` 是由前面提到过的 `symbolId` 规则决定的具体实例化后的ID值；而附加的 CSS 类可用于进一步定制外观表现形式。
扫一扫
到【灌水乐园】发言
1939
