[FREE TOOL] 🐻 Digibear Icons — manifest 기반, 크로스 플랫폼 아이콘 시스템

Source: Dev.to

저는 방금 Digibear Icons를 공개했습니다 — 무료 매니페스트 기반, 크로스‑플랫폼 아이콘 시스템입니다. 이것은 “그저 또 다른 아이콘 라이브러리”가 아닙니다.

개념은 매우 간단하지만 강력합니다:

아이콘을 매니페스트에 한 번 정의하면 → 모든 곳에서 자동 생성됩니다.

Digibear는 툴 우선 접근 방식(CLI + 매니페스트 및 Figma 플러그인)으로, 웹 프레임워크, 네이티브 플랫폼, 디자인 툴 전반에서 작동하며, 직접 만든 커스텀 아이콘도 통합할 수 있습니다(원한다면 우리의 아이콘을 사용할 필요가 없습니다).

가능한 워크플로우 중 하나

1. Figma에서 Digibear Icons 플러그인을 사용해 디자인합니다.
2. 필요한 모든 아이콘을 포함한 manifest를 내보냅니다.
3. 그 manifest를 개발자에게 전달합니다 (웹, 네이티브 등).
4. 개발자는 manifest를 활용해 자신의 플랫폼에 맞는 코드를 스캐폴드하고 아이콘을 생성합니다.

100 % 무료(개인·상업 모두)이며, 진화를 지속하고 지원이 필요한 분들을 위해 선택적인 스폰서십을 제공하고 있습니다(자세한 내용은 본 글 하단).

🧩 매니페스트로 관리하는 아이콘 (트리‑쉐이킹 없이, 완전 포터블)

Digibear는 단일 YAML 아이콘 매니페스트와 CLI를 중심으로 구축되었습니다.

필요한 모든 아이콘을 매니페스트에 정의하고, 이를 기반으로 다음을 생성합니다:

• 웹 프레임워크
• 네이티브 플랫폼
• 디자인 툴 (Figma)
• 다양한 포맷 (SVG, TS, SwiftUI, Compose, Flutter …)

거대한 번들 없이. 트리‑쉐이킹이 작동할지 여부를 추측할 필요도 없습니다.
생성된 코드를 직접 소유하고 편집할 수 있습니다.

🚀 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 스타일: line / fill / duotone → 총 4 371 아이콘
• 플랫폼 전반에 걸친 일관성을 위해 24 px 그리드에 디자인되었습니다

필요한 아이콘만 번들에 포함합니다.

🎨 Figma 플러그인 (동일한 매니페스트, 동일한 아이콘)

Figma 플러그인은 정확히 동일한 매니페스트를 사용합니다:

• 하나의 컴포넌트 세트, 아이콘을 변형으로 제공
• 손쉬운 변형 전환
• 언제든 아이콘 업데이트 가능
• 매니페스트 가져오기 / 내보내기
• 커스텀 아이콘 지원

이렇게 하면 디자인과 코드가 완벽히 동기화됩니다.

🔗 플러그인 링크는 아래에 있습니다 👇

🧩 커스텀 아이콘은 일등 시민

SVG 아이콘을 매니페스트에 직접 추가할 수 있습니다:

• Figma 플러그인에 표시됩니다
• 모든 플랫폼에서 올바르게 생성됩니다
• 내장 아이콘과 동일한 파이프라인을 따릅니다

“공식 vs 커스텀” 구분이 없습니다. 자세한 내용과 가이드라인은 웹사이트와 GitHub README(아래 링크)에서 확인하세요.

🤖 AI‑powered icon search

아이콘은 HB generated(Human Brain 🧠)로 생성된 뒤 태그가 붙고 설명이 추가되며, AI 모델을 사용해 임베딩되어 의미 기반 검색(키워드뿐 아니라 의미에 따라) 을 가능하게 합니다.

⚠️ Quick note: 검색이 때때로 느리게 느껴질 수 있습니다. 현재 모든 것이 단일 소형 Hetzner 머신(웹사이트, API, AI 검색, CLI 메타데이터 등)에서 실행되고 있기 때문입니다. 이는 설계상의 제한이 아니라 예산상의 제약입니다. 인프라를 업그레이드하는 것이 더 많은 스폰서십 지원과 함께 가장 먼저 계획된 일 중 하나이며, 스폰서십이 직접적으로 성능 향상에 도움이 되는 이유이기도 합니다(다음 섹션에서 자세히 설명).

🐻 FREE, but community‑funded ❤️ (IMPORTANT)

Digibear Icons는:

• 개인 & 상업적 사용 모두 무료
• 라이선스‑프리
• 기능‑제한 없음

장기적인 개발, 유지보수 및 개선은 후원에 의존합니다. 충분한 지원이 있다면 다음을 할 수 있습니다:

• 인프라 업그레이드 (가입/로그인 이메일 한도 상향, 더 빠른 AI 검색 등)
• 아이콘 추가
• 다양한 프레임워크용 래퍼 유지
• CLI, Figma 플러그인 및 AI 검색 개선

후원이 없으면 제가 직접 사용하는 스택(Qwik, SwiftUI, Jetpack Compose)만 주로 유지하고 아이콘 라이브러리는 크게 발전하지 않을 것입니다.

Digibear Icons가 도움이 된다면, 후원(또는 단순히 공유)만으로도 큰 도움이 됩니다 🐻 !

⭐ VIP 후원 (프로덕션 사용자용)

월 100 €/이상을 후원하면, Digibear Icons를 프로덕션에서 사용하는 개인 또는 기업을 위한 VIP 지원을 받을 수 있습니다.

VIP 후원자가 받는 혜택

• 📧 이메일을 통한 직접 지원 (VIPsupport@digibear.dev). 후원 시 사용한 이메일을 이용하세요.
• 질문, 버그, 통합 문제에 대한 우선 처리
• 이름 또는 로고를 (요청 시) 다음에 기재:
  • Digibear Icons 웹사이트
  • GitHub README
  • 향후 아이콘 배치에 대한 영향력 (요청이 보장되지는 않지만 항상 검토됩니다)

VIP 후원자는 후원 금액(최소 100 €/월) 기준으로 정렬됩니다. 금액이 높은 VIP가 웹사이트에 먼저 표시됩니다.

🛠️ 작은 인프라 메모 (투명성을 위해)

2025년 12월 26일 현재, 예산 제한으로 인해:

• 이메일은 Resend의 무료 SMTP 플랜(하루 100통 → 월 3 000통)을 통해 전송됩니다. 가입 확인 이메일이 도착하지 않으면, 나중에 다시 시도하면 보통 정상적으로 도착합니다.
• 웹사이트, AI 검색 및 서비스는 모두 하나의 저예산 서버에서 실행됩니다.

이러한 제한 사항에 대해 투명하게 알리는 것을 선호합니다.

📎 Links (게시물 하단)

• 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

📦 웹 코어 라이브러리

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로 무엇을 만들었는지 보는 것이 기쁩니다 🐻!