TinyVue图标组件函数实现与组件方式深度对比解析

一、主流Vue图标组件库的常见实现方式：Element Plus与Ant Design Vue的常规模式

无论你使用 Element Plus 还是 Ant Design Vue，这两种主流Vue组件库的图标用法都大同小异，非常直观便捷：

 复制代码

简洁明了，组件即图标，图标即组件。很多开发者初看时会觉得：这不过是注册一个组件，套用一个标签而已。

然而，当你初次打开 TinyVue 文档，看到以下代码片段时，就会发现它的图标用法大相径庭——

 复制代码import { IconShare } from '@opentiny/vue-icon'export default {
  components: {
    IconShare: IconShare() // 注意这个括号！！！
  }
}

最引人注目的就是那个括号——IconShare() 居然是在调用函数？难道不是直接注册组件吗？

没错，你没有看错。TinyVue 的图标本质是工厂函数，必须调用执行后才能转化为真正的 Vue 组件。

二、为什么图标要设计成函数？这样设计的背后考量

不过别急着下结论，这种设计自有其合理之处。

TinyVue 的图标采用了"工厂函数模式"。调用 IconShare() 会生成一个独立的 Vue 组件实例配置对象。其优势在于：

1. 按需生成，避免不必要的实例化：图标库里包含数百个图标，无需预先实例化所有图标，只对实际用到的进行"生产"，真正实现按需加载。
2. 支持后续扩展属性注入：工厂函数调用时可以传入配置参数，为图标的二次定制提供入口（标准图标的 shape、firstColor 等属性正是来源于此）。
3. 统一图标与组件的使用方式：你也可以将图标传递给组件的 icon 属性，实现完全一致的 API 风格。

简而言之，TinyVue 图标是一个"组件工厂"，并非普通组件。在使用前，你需要先"生产"一下。

三、基础用法：三步走，一步都不能少

第一步：从图标库中引入图标函数

 复制代码import { IconShare, IconDel, IconWriting, IconAscending, IconClockWork } from '@opentiny/vue-icon'

第二步：注册为 Vue 组件（必须执行函数！）

 复制代码export default {
  components: {
    IconShare: IconShare(),    // 执行函数，生成组件实例
    IconDel: IconDel(),
    IconWriting: IconWriting(),
    IconAscending: IconAscending(),
    IconClockWork: IconClockWork()
  }
}

第三步：在模板中直接使用

 复制代码

完整示例代码：

 复制代码

四、图标大小和颜色：通过CSS轻松掌控

TinyVue 图标底层基于 SVG，控制大小和颜色非常简洁高效。

控制大小：使用 font-size

 复制代码.my-icon {
  font-size: 24px; /* 图标尺寸直接由 font-size 决定 */
}

记住不要用 width/height，而是用 font-size。习惯后非常顺手。

控制颜色：使用 fill

 复制代码.my-icon {
  fill: #0067D1;  /* 图标填充色 */
}

当然，也支持 CSS 变量，与 TinyVue 的主题系统配合使用时效果更佳：

 复制代码.my-icon {
  fill: var(--tv-color-icon-control);
}

五、图标的四种使用方法

都说 TinyVue 的图标灵活，究竟灵活在哪里？下面介绍四种使用方式——

方式一：标签式（最直观）

 复制代码

方式二： 动态组件（适合动态切换场景）

 复制代码

方式三：传递给组件的 icon 属性（最常用）

许多 TinyVue 组件的 icon 属性直接接受图标组件：

 复制代码

方式四： 避免的错误用法（切勿这样写）

 复制代码

原因很简单：在模板中每次渲染都会重新执行 IconShare()，不断产生新的组件实例，导致不必要的性能开销。正确的做法是把执行结果保存在 data 中。

六、标准图标合集：当图标遇到"超级赛亚人"

TinyVue 在普通图标之上，还提供了一套"标准图标合集"（Advance Icons），专为 SaaS 业务场景设计，共计 600+ 个标准图标。

这批图标解锁了三个新功能：

功能一：线性 / 面性图标切换

通过 shape 属性在线性（line）和面性（filled）之间自由切换：

 复制代码

功能二：双色主题定制

通过 firstColor 和 secondColor 属性分别设置主色和副色：

 复制代码

功能三：托底效果

通过 underlay 属性为图标增加背景托底，使图标在页面上更加突出：

 复制代码

默认托底样式就是 { background: '#eef3fe', borderRadius: '4px', scale: 0.8 }，蓝色圆角底，富有科技感。

完整的标准图标用法示例：

 复制代码

七、显示 Title 提示：避免常见误区

这里有一个容易踩的坑：给图标添加 title 悬停提示时，不能直接在图标上使用 title 属性。

错误写法：

 复制代码  

正确做法：包裹一层父元素，在父元素上添加 title：

 复制代码
  

这是因为 SVG 元素对 HTML 的 title 属性处理方式不同，TinyVue 选择了更通用的父元素方案。

八、安装与引入

如果项目中尚未集成 TinyVue 图标库，请先安装：

 复制代码npm install @opentiny/vue-icon

然后按需引入即可，无需全量导入整个图标库：

 复制代码import { IconShare, IconEdit, IconDelete } from '@opentiny/vue-icon'

如果你需要动态渲染所有图标（比如制作图标展示页面），可以整包引入：

 复制代码import Svgs from '@opentiny/vue-icon'
// 然后通过 Svgs['IconName'] 访问对应图标函数

九、总结：掌握"函数式"图标的正确姿势

TinyVue 的图标设计初看似乎"另辟蹊径"，实际上是为了实现更好的可扩展性、一致性和性能优化。只要记住"调用函数，得到组件"这个核心口诀，后续操作便顺理成章。