SVG组件

这个组件是一个封装的 SVG 图标组件，用于统一加载 iconfont（通过 <use> 标签引用），支持传入图标名称、颜色、额外类名，适用于基于 iconfont.cn 等平台导出的 symbol 图标集。

<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color" /></svg>
</template>
​
<script lang="ts">import { defineComponent, computed } from 'vue'
​export default defineComponent({props: {iconClass: {type: String,required: true,},className: {type: String,default: '',},color: {type: String,default: '',},},setup(props) {return {iconName: computed(() => `#icon-${props.iconClass}`),svgClass: computed(() => {if (props.className) {return `svg-icon ${props.className}`}return 'svg-icon'}),}},})
</script>
​
<style scope lang="less">.nav-icon {position: relative;display: inline-block;margin-right: 12px;font-size: 15px;}
​.svg-icon {position: relative;width: 1em;height: 1em;vertical-align: -2px;fill: currentcolor;}
</style>

二、组件结构分析

template 模板部分

vue复制编辑<svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color" />
</svg>

说明：

• 使用 <svg> 结合 <use> 标签，实现 SVG 图标的复用。

• :xlink:href="iconName"：绑定图标路径，如 #icon-home。

• :fill="color"：支持自定义图标颜色。

• :class="svgClass"：支持额外类名传入，用于样式定制。

• aria-hidden="true"：屏蔽图标的可访问性（不被辅助工具识别为可交互元素）。

属性（props）说明：

Prop 名称	类型	是否必填	说明
iconClass	String	是	图标的名称，如 home
className	String	否	额外添加的类名（样式扩展）
color	String	否	图标颜色

setup() 返回：

• iconName：返回 #icon-${iconClass}，拼接 symbol id。

• svgClass：返回一个 class 字符串，基础类名是 svg-icon，可追加自定义类名。

三、使用方式示例

在父组件中使用：

<svg-icon icon-class="home" class-name="custom-style" color="#42b983" />