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" />