其实，

TinyVue 图标使用完全教程

在实际项目中。很多开发者会遇到以下痛点：

• 不知道图标是函数还是组件，导致直接写 时报错。
• 每次渲染都调用图标函数，造成不必要的性能浪费。
• Composition API 与 Options API 的命名差异让团队难以统一代码风格。
• 想自定义图标尺寸与颜色，却不知道最简洁的 CSS 写法。怎么说呢，
• 需要动态切换图标时不知道怎么优雅实现。

下面逐一解锁这些痛点，并给出完整的使用示例。其实，

安装图标库

TinyVue 的图标独立于主组件库。需要单独安装：

npm install @opentiny/vue-icon

从主要概念来看，图标是函数而非组件

与 Element Plus、Ant Design Vue 等常见库不同，TinyVue 将每个图标实现为一个工厂函数。你需要先执行该函数，才能得到可渲染的 Vue 组件实例。

import { IconShare } from '@opentiny/vue-icon'
const IconComponent = IconShare // IconComponent 是可用的 Vue 组件

这种设计让你可以在创建时注入自定义上下文。 例如双色或托底效果，也支持懒加载和按需创建。

模板中的三种标准用法

至于方式一，标签式使用

直接像普通组件一样使用，但要先在脚本中获取实例：

说到方式二，通过 动态切换

当你需要根据业务逻辑动态更换图标时只需更新引用即可：

至于方式三，作为属性值传递给其他组件

比如按钮的 :icon 属性可以直接接受图标实例：

User Pain Point 解读与常用方法

❌ 痛点一：误以为图标是普通组件导致报错

原因：  "无法识别标签名" 或 "Unknown custom element"

方法这方面，

• 确认导入的是函数，而不是已执行的组件。
• 在 script 中提前执行一次并缓存引用，接下来再在模板中使用。
• 不要在模板里直接写 而没有对应的注册。

❌ 痛点二：每次渲染都重复调用函数导致性能下降

至于方法，

• 只在 //或 Options API 的 $setup/生命周期钩子里执行一次接下来将结果赋值给响应式变量或常量。不过，
• 避免在模板表达式里写 {{ IconShare }}.
• 如果必须动态切换。仍然保持一样做法，只是更新已缓存实例，而不是重新生成新的实例对象。

❌ 痛点三：命名不一致导致团队代码混乱

方法的观点是。

• Composition API : e.g.,alert;.
• .

Tip这方面，

使用统一命名约定文件夹结构。例如： html import { IconAdd as AddIcon } from '@opentiny/vue-icon' // Options API import { iconAdd as addIcon } from '@opentiny/vue-icon' // Composition API

。

---