使用 Affinity Designer 设计 Lucide 图标模板下载、SVG 导出与提交流程完全指南【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide本篇指南面向希望使用Affinity Designer为 Lucide 图标库贡献新图标的开发者与设计师系统讲解从获取官方.aftemplate模板、完成软件单位配置、遵循设计语言绘制到按规范导出 SVG、优化并提交验证的完整工作流。读完本文你将掌握 Lucide 24×24 画布、2px 描边、圆头端点等硬性规范在 Affinity Designer 中的具体落地方案并能产出通过仓库 lint 校验的合格图标文件。一、工作流总览Affinity Designer 是 Lucide 官方认可的图标设计工具之一其贡献流程与其他工具Figma、Illustrator、Inkscape完全对齐无论使用哪种矢量编辑器最终交付物的设计规范与 SVG 要求完全一致。完整工作流如下下载并打开官方 Affinity Designer 模板docs/public/templates/affinity_designer.aftemplate模板已预设好 24×24 画布与单位配置。遵循 Lucide 设计语言进行绘制规范细则见 design-principles.md 与 specification.md。导出 SVGFile Export设置栅格化为Nothing、勾选Export text as curves、Use hex colors、Flatten transforms。用 Lucide Studio 优化导出文件再按照仓库的 SVG 约定与元数据约定完成提交。二、绘图前的关键设置单位改为像素这是 Affinity Designer 与 Lucide 工作流结合时最容易踩的坑。Affinity Designer 默认以 points点作为描边单位而 Lucide 的图标规范全部以像素pixel为基准24×24 画布、2px 描边、1px 安全区单位不一致会导致导出的 SVG 数值错乱、图标不符合像素对齐要求。按以下路径修改设置打开Preferences User Interface首选项 用户界面。找到Decimal Places for Unit Types单位类型小数位数区域。取消勾选Show Lines in points以点显示线条。这样描边及相关度量就会以像素为单位显示和输出确保后续在 24×24 画布上绘制的 2px 描边真实对应 SVG 中的 2 个像素单位。三、下载并打开官方模板模板文件位于仓库的 docs/public/templates/affinity_designer.aftemplate。.aftemplate是 Affinity Designer 的原生模板格式双击即可用 Affinity Designer 打开它已经为你预制了24 × 24 像素的正方形画布Lucide 硬性要求见下文设计规范与像素网格对齐的工作环境适合 Lucide 描边绘制的默认设置。打开模板后直接在画布上开始绘制即可无需再从零创建文档。绘制完成后按 Lucide 的命名约定为图标命名例如arrow-down-0-1、badge-plus这样的 kebab-case 名称详见 naming-conventions.md。四、遵循 Lucide 设计语言绘制绘制阶段必须遵循 design-principles.md 中定义的设计语言。以下是与 Affinity Designer 绘图直接相关的核心规则完整规则列表与 Must/Should 分级见 specification.md1. 24 × 24 像素画布Must图标必须绘制在 24×24 像素的正方形画布上不能更大、更小或非正方形。模板已满足此要求绘制时不要随意改变画布尺寸。2. 1 像素安全区Must描边与画布边缘之间必须保持至少 1 像素的留白防止描边被裁切。由于描边是居中的这意味着路径本身的坐标应距画布边缘至少 2 像素1px 描边外沿 1px 安全区。3. 2 像素描边Must所有描边宽度必须统一为 2 像素不得混用粗细。在 Affinity Designer 的描边面板中将 Width 设为 2px 即可。4. 圆头端点与圆角连接Must开放路径的端点caps必须使用round圆头路径连接处joins必须使用round圆角连接禁止使用 miter斜接或 bevel平切。在 Affinity Designer 的描边面板中将 Cap 与 Join 均设为 Round。注意圆角连接不等同于圆角化处理大多数锐利直角仍需要额外的圆角半径。5. 居中描边Must描边必须居中对齐路径禁止使用 inside/outside 对齐方式——它们会改变线连接处的观感产生尖锐的内角。6. 一致的圆角半径Should几乎每个锐角都应被圆角化圆角半径取决于元素尺寸与角度宽度或高度至少 8 像素的元素90° 角使用2 像素圆角半径小于 8 像素的元素90° 角使用1 像素圆角半径对角线以 90° 相交时通常使用约2.41 像素1√2的半径以保持像素网格对齐多条线交汇处的角应保持尖锐避免影响不同尺寸下的渲染一致性。7. 元素间距Must不同元素之间必须有至少2 像素的视觉间距形状内部的内间隙也应尽量保持 2 像素。可以用一个 2 像素宽的圆放入间隙中测试是否重叠。8. 其他设计原则视觉重量图标应与circle、square等参考图标重量相当可将图标放大模糊后对比明暗视觉平衡图标应在画布内视觉居中对称图标几何居中非对称图标可微调低密度简化复杂主题保留可识别特征不要堆砌细节平滑简洁曲线优先使用简单弧线与二次贝塞尔曲线三次贝塞尔曲线的控制点需对齐避免凸起像素网格对齐坐标、圆弧中心尽量对齐像素网格保证低分辨率屏幕上的清晰度但像素对齐不应损害形状识别与视觉平衡复用既有形状变体图标应保持基础图标的几何、位置与方向公共修饰符在所有图标中保持一致。五、导出 SVG四个关键选项逐一解析绘制完成后通过File Export文件 导出导出 SVG。导出对话框中以下四个设置缺一不可导出选项应设置值原因Rasterization栅格化Nothing图标必须保持为纯矢量路径任何栅格化都会破坏 SVG 的缩放清晰度也违反仓库对 SVG 元素的限制Export text as curves文本转曲线勾选图标中若含文本转为曲线可避免字体依赖与跨平台渲染差异输出纯路径Use hex colors使用十六进制颜色勾选仓库要求 SVG 使用标准十六进制颜色体系且 Lucide 图标统一使用strokecurrentColorhex 颜色保证导出值规范Flatten transforms扁平化变换勾选将对象的变换矩阵烘焙进路径数据消除导出 SVG 中的 transform 属性——这是仓库的硬性约束第四项尤其重要仓库的 SVG 约定 明确规定图标 SVG不得使用 transforms变换只允许path、line、polygon、polyline、circle、ellipse、rect这七类元素及其尺寸/位置属性。勾选 Flatten transforms 能从源头避免 transform 泄漏。六、优化导出文件Lucide Studio导出后的 SVG 还需要经过Lucide Studio优化主要完成两件事精简路径数据将路径数值整理到 3 位小数显著减小文件体积清理冗余属性移除不必要的中继点与多余控制点使路径符合仓库的简洁性要求。七、提交前的代码规范核对优化完成后对照 code-conventions.md 中的 SVG 约定做最终检查。Lucide 图标的根 SVG 属性模板如下svg xmlnshttp://www.w3.org/2000/svg width24 height24 viewBox0 0 24 24 fillnone strokecurrentColor stroke-width2 stroke-linecapround stroke-linejoinround !-- SVGElements -- /svg核对要点使用标准的 24×24 viewBox使用fillnone与strokecurrentColor不允许显式描边颜色与填充色描边宽度、线帽、线连接与 Lucide 默认值一致2、round、round不使用 transforms、filters、fills、显式 stroke也不得使用use元素引用 ID 在嵌入 HTML 时可能冲突每个 SVG 旁必须有同名的 JSON 元数据文件如home.svg→home.json包含$schema、contributors、use-cases、tags、categories字段具体规则见 metadata-conventions。最后在仓库根目录运行验证命令pnpm run lint:icons # 校验图标 SVG 结构与格式 pnpm run lint:icons-fix # 用 Prettier 自动格式化 SVG pnpm run lint:icons:all # 同时检查名称、分类、元数据与 SVG 结构 pnpm run lint:json:icons # 校验图标 JSON 元数据八、快速检查清单提交 Pull Request 前确认以下事项全部通过在 24×24 像素画布上设计边缘留白 ≥ 1px描边统一 2px、居中、round cap 与 round join元素间距 ≥ 2px圆角半径符合尺寸规则导出时 Rasterization 为 Nothing且勾选 text as curves、hex colors、flatten transforms已用 Lucide Studio 优化路径到 3 位小数SVG 仅含允许元素无 transform/filter/fill/显式描边/use已创建匹配的 JSON 元数据文件且通过pnpm run lint:json:iconspnpm run lint:icons全部通过。按照以上流程你使用 Affinity Designer 绘制的图标就能与 Lucide 图标库保持视觉一致性并顺利通过仓库的自动化校验成为 Lucide 社区图标集的一部分。【免费下载链接】lucideBeautiful consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.项目地址: https://gitcode.com/GitHub_Trending/lu/lucide创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考