Icon 图标 #

Icon 作为 UI 构成中重要的元素，它一定程度上影响整体 UI 界面呈现出的风格，TPower Design 初期提供一套适用于中后台场景的线性 Icon，以普适、通用的标准进行设计，风格契合默认 TPower Design 的风格，线性、圆角。

尺寸标准 #

SVG实现和使用规范 #

TPower Design 将SVG 作为图标主要的实现方式，通过 vite-plugin-svg-icons 插件将SVG静态文件转换为可复用的图标组件，按需引用。

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 使用currentColor继承父级颜色 -->
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 12L19 12" stroke="currentColor" stroke-width="2"/>
</svg>

使用示例：

import { SvgIcon } from '@/components/Icon'
 // name 为svg文件的名称，size 为图标大小，color 为图标颜色
 <SvgIcon name="icon-xxx" size='16px' color='#f00'/>

设计原则 #

准确 设计造型准确的图标（保持偶数原则，去小数点）；选择表意准确的图标，不对用户的认知造成困扰。

简单 在表意清晰准确的基础上，尽量保持图形的简洁，不做多余的修饰。

节奏 挖掘构图中的秩序之美。

愉悦 赋予适度的情感。

规范 #

图标是否需要都是按照 48 * 48的规格进行制作的

在处理一些对称图形时居中处理，不应为了对齐栅格而打破画面平衡 （避免做图形动画时造成不对称的问题）

在绘制一些具有指向性的图标时，建议在其指引的方向多预留 0.25px 的空间，以便平衡画面 （在布局居中、对齐时相对美观，无需额外添加偏移值）

在确保高识别度的情况下，寻求内部结构以及外部轮廓上的最简

无障碍设计 #

1. 最小可点击区域规范：24x24px

2. 颜色对比度：图形与背景 ≥ 4.5:1

3. 辅助文字说明

   html

    <button aria-label="搜索">
       <SvgIcon name='icon-search'/>搜索图标
    </button>