TinyVue图标使用完整指南

TinyVue 图标使用完全指南

TinyVue 是 OpenTiny 开源项目的前端组件库，它的图标系统设计有点特别——图标不是普通组件，而是函数！ 初次接触这一设计可能会感到困惑，但一旦理解背后的思路，你会发现它带来的灵活性远超想象。本文将从核心概念讲起，逐步带你彻底掌握 TinyVue 图标的使用方法。

安装图标库

TinyVue 的图标是独立于组件库单独提供的，需要额外安装：

npm install @opentiny/vue-icon

核心概念：图标是函数

和大多数组件库（比如 Element Plus、Ant Design Vue）直接将图标做成 Vue 组件不同，TinyVue 里的每个图标都是一个工厂函数。也就是说，你需要先调用这个函数，才能得到一个真正可渲染的 Vue 组件。

import { IconShare } from '@opentiny/vue-icon'// IconShare 是个函数，调用了才返回组件
const IconComponent = IconShare()

这个设计的巧妙之处在于，你可以在创建图标组件时，向其中注入自定义上下文，而不必修改图标组件本身的代码。这也正是后面高级特性（如双色、托底效果）能够实现的基础。

模板中的三种使用方式

以 Share 图标为例，在模板中有三种标准用法：

方式一：标签式使用（最推荐）

这是最简洁、也最推荐的方式：

方式二：通过 动态组件

当需要根据条件动态切换图标时，这种方式非常方便：

方式三：作为属性值传入

还可以将图标作为其他组件的属性传入，例如按钮的 icon 属性：

调整图标大小和颜色

TinyVue 的图标本质上是 SVG 元素，所有样式都可以通过 CSS 控制：

• 大小：使用 font-size 控制（SVG 的 1em 映射到当前字号）
• 颜色：使用 fill 控制（即 SVG 的填充色）

Options API 用法

如果项目仍使用 Options API，用法如下：

注意一点：Composition API 版本导入时使用小驼峰命名（如 iconShare），而 Options API 版本使用大驼峰（如 IconShare）。这只是命名规范上的差异，功能完全一致。

进阶用法：高级图标特性

TinyVue 为 SaaS 业务准备的高级图标支持以下特性：

• shape：可选 'line'（线性，默认）或 'filled'（面性），用于切换图标风格
• firstColor：图标主色调
• secondColor：图标辅助色调
• underlay：托底效果配置对象，支持 background（背景色）、borderRadius（圆角）、scale（缩放比例）

这种高级用法让你能够动态控制图标的表现形式，特别适合需要与品牌色保持一致的业务场景。

常见误区与避坑

误区：在模板中直接调用函数

正确用法：提前执行并缓存引用

原因很简单：在模板中直接调用函数，Vue 每次重新渲染都会执行 IconShare()，造成性能浪费并导致组件不断重建。记住，每个函数调用都有成本。

支持的主题变量

TinyVue 的图标默认使用 CSS 变量控制颜色，你可以通过覆盖这些变量来统一调整图标样式：

.tiny-svg {
  fill: var(--tv-color-icon-control);
  color: var(--tv-color-icon-control);
}

也就是说，只需修改 --tv-color-icon-control 变量，就能一键切换所有图标的默认颜色。

总结

归根结底，TinyVue 的图标系统遵循一个简单原则：图标是函数，先执行再使用。掌握这一核心，其他用法就迎刃而解。这种函数式设计不仅带来性能优势（懒加载、按需创建），也为双色、托底等高级特性奠定了基础。

快速上手只需三步：

1. 从 @opentiny/vue-icon 导入图标函数
2. 调用函数获取组件实例
3. 在模板中像普通组件一样直接使用