Iconoir 图标在线调整尺寸线宽全教程！适配 Figma 及多平台 2025 新版

? 一、Iconoir 基础认知：为什么它是设计刚需？

1. 免费开源：采用 MIT 协议，可免费商用和二次修改，对个人和企业都很友好。
2. 跨平台支持：提供 SVG、React、Vue 等多种格式，适配网页、移动端等不同开发需求。
3. 在线调整功能：官网左侧有两个快捷工具，能直接调整图标尺寸和线宽，导出的 SVG 文件保留完美像素效果，不用再导入设计软件二次加工。

?️ 二、在线调整尺寸线宽：三步搞定精准需求

1. 进入 Iconoir 官网

2. 选择目标图标

3. 调整尺寸和线宽

• 尺寸调整：在 “Size” 输入框直接输入数值，比如 24px、48px，或者拉动滑块选择预设值。调整后，图标会实时预览效果。
• 线宽调整：在 “Stroke Width” 输入框输入数值，比如 2px、3px，同样可以拉动滑块。线宽调整也会实时显示。

? 三、适配 Figma：无缝集成提升设计效率

1. 手动导入 SVG 文件

• 下载 SVG：按照前面的步骤，下载调整好尺寸和线宽的 SVG 文件。
• 导入 Figma：在 Figma 中新建一个文件，点击 “File” - “Import” - “Upload from Computer”，选择下载好的 SVG 文件。导入后，图标会保持矢量属性，可随意缩放。

2. 使用第三方插件

• 安装插件：打开 Figma 社区，搜索 “Iconoir Icon Library by Iconduck”，点击安装。
• 搜索图标：安装完成后，在 Figma 右侧插件面板找到该插件，输入关键词搜索图标。
• 插入图标：选中图标后，点击 “Insert” 按钮，图标就会出现在画布上。插件还支持批量插入，大大提高工作效率。

? 四、多平台适配：从设计到开发全流程覆盖

1. Sketch 适配

• 导入 SVG：下载 SVG 文件后，直接拖入 Sketch 画布。Sketch 会自动识别 SVG 矢量图形，可进行编辑。
• 使用插件：如果需要批量处理，可安装 Sketch Measure 插件，方便标注和导出。

2. Adobe XD 适配

• 导入 SVG：同样将 SVG 文件拖入 Adobe XD 画布，保持矢量属性。
• 调整样式：在右侧属性面板，可修改图标的颜色、大小、线宽等参数。

3. Axure 适配

• 转换为图片：将 SVG 文件导出为 PNG 或 JPG 格式。
• 插入 Axure：在 Axure 中点击 “Image” - “Import Image”，选择导出的图片文件。虽然失去了矢量属性，但能满足基本的原型设计需求。

? 五、常见问题及解决方案

1. 线宽调整后边缘模糊

• 原因：可能是调整的线宽不符合像素对齐规则。
• 解决方法：在调整线宽时，尽量使用偶数数值，比如 2px、4px，避免出现半像素问题。如果已经模糊，可在设计软件中手动调整边缘。

2. 批量调整效率低

• 原因：手动逐个调整图标耗时费力。
• 解决方法：使用 Iconify 插件，支持批量选择和调整图标尺寸、线宽。或者使用图标提取器等工具，批量处理多个图标。

3. 图标在不同平台显示不一致

• 原因：不同平台对 SVG 的解析可能存在差异。
• 解决方法：在导出 SVG 文件时，检查是否包含不必要的代码。如果问题依旧，可尝试将 SVG 转换为其他格式，如 PNG，再进行使用。

? 六、总结：Iconoir 让设计开发更高效