Vue CLI项目中在Vue Storybook实现SVG Sprite图标组件

嘿，我来帮你把这个Icon组件改成支持动态引用的版本，步骤很清晰，咱们一步步来：

1. 定义组件Props #

首先给组件添加一个name属性，用来接收外部传入的图标名称，最好设置为必填项，这样能避免遗漏参数的问题：

<script>
export default {
  name: 'Icon',
  props: {
    // 图标名称（对应SVG Sprite里的id，比如你示例里的icon-compliance）
    name: {
      type: String,
      required: true,
      validator: (value) => {
        // 简单校验非空
        return value.trim().length > 0
      }
    },
    // 可选：允许外部传入自定义类名
    className: {
      type: String,
      default: ''
    },
    // 可选：无障碍标签，提升 accessibility
    ariaLabel: {
      type: String,
      default: 'icon'
    }
  }
}
</script>

2. 动态绑定SVG引用路径 #

接下来修改模板部分，把硬编码的xlink:href改成动态绑定，这里要注意Vue CLI中静态资源的路径处理：

• 用@别名指向src目录（Vue CLI默认配置），这样路径更可靠
• 拼接图标ID：#icon-${name}（这里假设你的Sprite里每个图标的id都是icon-xxx格式，如果不是，调整拼接规则就行）

<template>
  <svg 
    :class="['icon', className]"
    :aria-label="ariaLabel"
    role="img"
  >
    <use :xlink:href="`@/assets/icons.svg#icon-${name}`"></use>
  </svg>
</template>

3. 样式优化（可选） #

可以给默认的.icon类加一些基础样式，让图标更易控制：

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* 让图标颜色继承父元素文字颜色，方便自定义 */
  vertical-align: middle;
}
</style>

4. 使用组件 #

现在你就可以在其他组件里这样调用了：

<!-- 引用compliance图标 -->
<Icon name="compliance" />

<!-- 带自定义类名和无障碍标签 -->
<Icon name="user" className="text-blue-500" ariaLabel="用户图标" />

注意事项 #

• 如果你的SVG Sprite里的图标id不是icon-xxx格式，记得修改模板里的拼接规则，比如如果id是直接compliance，那就是#${name}
• 如果icons.svg放在public目录下，路径要改成/icons.svg#icon-${name}（不需要@，直接从根目录引用）

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