[免费工具] 🐻 Digibear Icons — 基于清单的跨平台图标系统

Source: Dev.to

我刚刚发布了 Digibear Icons —— 一个免费、基于清单（manifest）的跨平台图标系统。它并非“又一个图标库”。

概念非常简单却强大：

在清单中定义一次图标 → 在所有地方生成。

Digibear 以工具为先（CLI + manifest 与 Figma 插件），可跨 Web 框架、原生平台和设计工具使用，甚至允许你集成自己的自定义图标（如果不想使用我们的图标，也完全可以）。

一种可能的工作流程

1. 在 Figma 中设计 using the Digibear Icons plugin.
2. 导出清单 that contains all the icons you need.
3. 将该清单交给开发者 (web, native, …).
4. 开发者使用清单搭建代码框架并生成图标 for their platform using the manifest.

它是 100 % 免费 (personal & commercial)，with optional sponsorships to keep it evolving and for those needing support (details at the bottom of this post).

🧩 Icons as a manifest (no tree‑shaking, fully portable)

Digibear is built around a single YAML icon manifest + a CLI.

You define all the icons you need in the manifest and generate everything from that for:

• Web frameworks
• Native platforms
• Design tools (Figma)
• Multiple formats (SVG, TS, SwiftUI, Compose, Flutter …)

No giant bundles. No guessing whether tree‑shaking will work or not.
You own the generated code and you can edit it.

🚀 CLI: 从零到几秒钟生成可移植图标

安装 CLI

npm install -g @digibeardev/icons-cli

1️⃣ 构建你的框架

dgbear scaffold -f react -v 1.0.0

(支持 Qwik、React、Vue、Angular、Svelte、Solid、SwiftUI、Jetpack Compose、Flutter …)

2️⃣ 选择所需图标

dgbear add heart,star
dgbear add leaf,cactus fill,duotone

• 可以使用逗号一次性添加多个图标，样式同理。
• 更高级的高级用户模式请参见 GitHub README（链接在本文底部）。

这会更新你的图标清单，可在团队、仓库，甚至设计工具之间共享。

3️⃣ 生成全部

dgbear gen

就这样。所有配置的输出都会生成图标。

高级功能（主题、变体、图标组、自定义图标、多平台输出、清单合并等）可在官网和 GitHub README 中查阅。

🎨 图标库

• 1 457 个图标
• 3 种风格：线条 / 填充 / 双音调 → 共 4 371 个图标
• 基于 24 像素网格设计，以确保跨平台的一致性

仅打包您实际使用的图标。

🎨 Figma 插件（相同的清单，相同的图标）

• 一个组件集，图标作为变体
• 轻松切换变体
• 随时更新图标
• 导入 / 导出清单
• 支持自定义图标

这使得设计与代码完美同步。

🔗 插件链接在下方 👇

🧩 自定义图标是一等公民

您可以直接在 manifest 中添加自己的 SVG 图标：

• 它们会出现在 Figma 插件中
• 它们在所有平台上均能正确生成
• 它们遵循与内置图标相同的流水线

没有“官方 vs 自定义”的区分。详细信息和指南请参阅网站和 GitHub README（如下链接）。

🤖 AI‑powered icon search

Icons are HB generated (Human Brain 🧠)，已标记、描述，然后使用 AI 模型进行嵌入，以实现语义搜索（按意义，而不仅仅是关键词）。

⚠️ Quick note：搜索有时可能会感觉慢，因为目前所有内容都运行在一台小型 Hetzner 机器上（网站、API、AI 搜索、CLI 元数据等）。这是一种预算限制，而非设计局限。升级基础设施是随着更多赞助支持而计划的首要任务之一，这也是赞助直接帮助提升性能的原因（下一节会有更多说明）。

🐻 免费，但社区资助 ❤️（IMPORTANT）

Digibear Icons 是：

• 免费（个人 & 商业使用均可）
• 无需许可证
• 没有功能限制

长期的开发、维护和改进依赖赞助。有了足够的支持，我可以：

• 升级基础设施（更高的注册/登录邮件上限、更快的 AI 搜索，…）
• 添加更多图标
• 在各框架之间维护包装器
• 改进 CLI、Figma 插件和 AI 搜索

如果没有赞助，我将主要维护我个人使用的技术栈（Qwik、SwiftUI、Jetpack Compose），图标库也不会有太大演进。

如果 Digibear Icons 对你有帮助，赞助（甚至仅仅是分享）都能帮上大忙 🐻 !

⭐ VIP 赞助（用于生产用户）

对于 每月 100 €/以上 的赞助者，可获得 VIP 支持，适用于在生产环境中使用 Digibear Icons 的个人或公司。

VIP 赞助者将获得

• 📧 通过电子邮件直接支持（VIPsupport@digibear.dev）。请使用与赞助关联的电子邮件。
• 对问题、漏洞和集成问题的优先处理
• 根据请求在以下位置列出名称或徽标：
  • Digibear Icons 网站
  • GitHub README
  • 影响即将发布的图标批次（请求不保证一定实现，但始终会被考虑）

VIP 赞助者会按赞助金额（最低每月 100 €）排序。赞助金额更高的 VIP 将在网站上优先列出。

🛠️ 小型基础设施说明（为透明起见）

截至 2025年12月26日，由于预算限制：

• 邮件通过 Resend 的免费 SMTP 计划 发送（100 封邮件/天 → 3 000 封/月）。如果注册邮件未收到，稍后再试通常会成功。
• 网站、AI 搜索和服务均运行在同一台低预算服务器上。

我倾向于对这些限制保持透明。

📎 链接（帖子的底部）

• GitHub 仓库 & README: https://github.com/digibeardev/icons
• 官方网站: https://digibear.dev
• Figma 插件: https://www.figma.com/community/plugin/1234567890/Digibear-Icons
• 赞助页面: https://digibear.dev/sponsor
• VIP 支持邮箱: VIPsupport@digibear.dev

感谢查看 Digibear Icons! 🎉

🔗 链接、完整文档与高级用法

🌍 网站

https://digibear.dev

📦 CLI

https://www.npmjs.com/package/@digibeardev/icons-cli

📦 Web 核心库

https://www.npmjs.com/package/@digibeardev/icons-core

📚 CLI 文档（完整清单与高级用法）

https://github.com/digibearapp/icons-cli

🎨 Figma 插件

https://www.figma.com/community/plugin/1584910839032205037/digibear-icons

感谢阅读，也感谢您可能提供的任何支持 ❤️！

即使是分享 Digibear Icons 或提供反馈，也比您想象的更有帮助。

我很乐意回答问题、获取反馈，并看看您用 Digibear Icons 🐻 构建了什么！