一个工具条里,搜索是细线条,下载是实心,设置又像另一套系统;图标各自都能看懂,放在一起却显得散。Lucide 的用处,是给常见操作提供一套可以连续使用的 SVG 语言。挑图标时,不必每遇到一个新按钮就重新找素材。
先看整套规则,再挑单个图形
Lucide 的设计规范以 24 × 24 画布和 2 像素线宽为基础,路径使用圆端点与圆连接。边缘留白、元素间距和视觉重量都有共同约束。箭头、文件夹与日历虽然形状不同,放进同一排控件时更容易保持节奏。
可以先挑三类高频图标试排:导航中的入口、工具条里的动作、列表中的状态。比较时既看一行里的轻重,也看缩小后的关键特征。某个符号如果需要反复解释,换成带文字的按钮往往更直接。
设计文件与代码可以接上同一个名字
图标本身是 SVG,适合进入设计稿和网页。官方还提供 React、Vue、Svelte 等组件包;在 React 中,每个图标都是独立的内联 SVG 组件,可设置尺寸、颜色和线宽,并按实际引入的图标构建。
建立项目里的小型图标清单,比把整库全部搬进界面更好管理。例如固定“搜索、筛选、复制、下载”四个动作的名称与图标,页面扩展时沿用这张清单。设计稿命名和代码导入名对应起来,修改也更容易追踪。
图标负责提示,按钮仍要说清动作
Lucide 图标默认带有 aria-hidden="true",读屏软件会跳过它们。按钮上已经写着“下载”“设置”时,图标只是视觉提示,保留默认值即可,不需要给每个 SVG 再补一段描述。只有图标、没有可见文字的功能按钮,应使用语义化的 <button> 元素,把可访问名称放在按钮本身,例如 aria-label="下载报告",里面的 SVG 继续保持隐藏。图标画多大和按钮能点多大也要分开处理,小图标可以放进留足点击区域的按钮里。
同一个动作持续使用同一个图标,不同动作也别为了视觉整齐共用一个含糊符号。保存、下载与导出看似相近,却可能改变不同位置的数据;文字标签能把这种差别交代给用户。
把许可声明一起放进项目
Lucide 主体采用 ISC 许可证,其中一部分源自 Feather 的图标仍按 MIT 许可说明列出。使用、修改和分发时,应保留适用的版权与许可声明。项目可以把它们收进第三方许可文件,和所使用的资源版本一起保存。
从一个页面开始统一图标最容易看到效果:先选常用动作,排成一行,配上真实按钮文字,再检查明暗背景和小尺寸。图标库解决形状的一致性,界面里的含义仍靠具体动作与标签建立。