TinyVue图标组件深度解析：函数而非组件
来源：互联网 2026-06-14 08:13:01TinyVue图标采用工厂函数模式，调用IconShare()生成Vue组件后注册，实现按需加载。支持CSS控制大小（font-size）和颜色（fill）。标准图标提供shape、firstColor、secondColor、underlay属性，可通过父元素添加title提示。注意模板中禁止直接调用函数。
一、先说说业界“正常”的图标长什么样
不论使用 Element Plus 还是 Ant Design Vue，图标的用法基本一致，上手顺畅：
长期稳定更新的攒劲资源： >>>点此立即查看<<<
复制代码
清晰直观：组件即图标，图标即组件。看到这样的用法，通常会认为只需注册组件、套上标签即可。
然而，首次打开 TinyVue 文档，看到这段代码时，画风完全不同——
复制代码import { IconShare } from '@opentiny/vue-icon'export default {
components: {
IconShare: IconShare() // 注意这个括号！
}
}
最引人注意的是那个括号——IconShare() 是在调用函数，而非直接注册组件。
无需怀疑，你的观察正确。TinyVue 的图标本质是函数，调用执行后才能获得真正的 Vue 组件。
二、为何设计成函数？并非有意折腾
先别急着否定，这样的设计自有其道理。
TinyVue 的图标采用“工厂函数模式”。调用 IconShare() 会生成一个独立的 Vue 组件实例配置对象。好处包括：
- 按需生成，避免不必要的实例化：图标库包含数百个图标，只有用到的才被“生产”，真正实现按需加载。
- 支持后续扩展属性注入：工厂函数调用时可传入配置，为图标二次定制提供入口（标准图标的
shape、firstColor等参数即源于此）。 - 统一图标与组件的使用方式：图标可被传递给组件的
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'] 访问对应图标函数
九、总结：掌握“函数式”图标的正确用法
| 要点 | 说明 |
|---|---|
| 图标本质 | 工厂函数，调用后返回 Vue 组件 |
| 注册方式 | components: { IconShare: IconShare() } |
| 大小控制 | 使用 font-size CSS 属性 |
| 颜色控制 | 使用 fill CSS 属性 |
| 传给组件 | :icon="iconComponent" |
| 标准图标 | 支持 shape、firstColor、secondColor、underlay |
| Title 提示 | 包裹父元素，在父元素添加 title |
| 禁忌 | 模板中直接写 IconShare()，每次渲染都会重新执行 |
TinyVue 的图标设计初看“另辟蹊径”，实则为了更好的扩展性和一致性。只要记住“调用函数，得到组件”这一核心原则，后续操作便顺理成章。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
