SuperAPI AI 工具集

iconography

通用与其它

查看项目

更新于 10-15 19:52

技能介绍

用途:在挑选或绘制图标时提供规范,覆盖描边粗细、像素网格、视觉尺寸、图标与文字标签的取舍,以及图标之间的变形。

主要能力:主张整个产品只用一套图标集,且优先使用项目已安装的那套(检查 package.json 中的 lucide-react、@radix-ui/react-icons、@phosphor-icons/react、@heroicons/react、material-symbols 或本地 components/icons 目录)。要求有效描边与相邻文字字重匹配,有效像素 = stroke-width ×(渲染像素 ÷ viewBox 单位);文字字重 400–500 对应约 1.5px 有效描边,600 及以上对应 2px。尺寸变化时更换切图而非缩放同一图形,约 12px 以下改用填充变体。几何需对齐到实际渲染尺寸的整像素,Radix Icons 画在 15 网格上,应在 15px 渲染。按视觉质量而非外框居中,如播放三角向尖端微调约 1px。图标加标签间距 6–8px。一个图标只承载一个含义,旋转组除外。会变形的图标需共享图元数量预算,Benji Taylor 的图标集每个图标恰好三条 SVG 线。多路径图标应合并为单路径单填充,用 currentColor 着色。

使用方式:绘制或修正图标时输出 SVG,显式声明 viewBox、stroke-width、stroke-linecap、stroke-linejoin,轮廓集用 fill="none" 与 stroke="currentColor",不写 width/height,并注明适用渲染尺寸及各尺寸下的有效描边。审计图标集时按界面报告每个图标的来源、有效描边与相邻文字字重。

适用场景:界面图标选型、绘制、审计与变形设计。

限制:变形动画的时长、曲线与中断行为属于 transitions 技能,是否动画由频率门决定;照片、插画、头像与设备外框属于图像而非图标;品牌标识不纳入图标集、不重绘。资料未提供具体收费、价格与平台信息。