ericks-design-store은(는) 무엇을 하나요?
웹 앱 및 IoT를 위한 오프라인 디자인 편람 — 11개 오픈 소스 아이콘 세트(Lucide, Phosphor, Tabler, Heroicons, Material Symbols 등)에서 44,000개 이상의 아이콘을 제공하며, SVG/React/Vue/Svelte 출력을 위한 CLI, 브라우징 가능한 갤러리, Claude 스킬을 포함합니다. 아이콘을 넘어 확장 가능하도록 설계되었습니다.
기능
- 방대한 아이콘 컬렉션: 11개 오픈 소스 세트에서 44,000개 이상의 아이콘을 오프라인에서 사용 가능.
- 다양한 형식 출력: CLI를 통해 SVG, React, Vue, Svelte 컴포넌트로 아이콘 출력.
- 브라우징 갤러리: 웹 기반 갤러리에서 아이콘을 탐색하고 미리보기.
- Claude 스킬: Claude Code 환경에서 아이콘 검색 및 코드 생성을 위한 AI 인터페이스.
- 확장성: 아이콘 외에도 디자인 요소(색상, 타이포그래피 등)로 확장 가능한 구조.
지원 아이콘 세트
| 세트 이름 | 아이콘 수 (대략) | 라이선스 |
|---|---|---|
| Lucide | 1,500+ | ISC |
| Phosphor | 7,500+ | MIT |
| Tabler Icons | 4,900+ | MIT |
| Heroicons | 600+ | MIT |
| Material Symbols | 10,000+ | Apache 2.0 |
| ... 외 6개 세트 | 20,000+ | 다양 |
사용 방법
CLI
# 아이콘 검색
npx ericks-design-store search "search-term"
# 아이콘 내보내기 (기본: SVG)
npx ericks-design-store export icon-name --format svg
# React 컴포넌트로 내보내기
npx ericks-design-store export icon-name --format react
# Vue 컴포넌트로 내보내기
npx ericks-design-store export icon-name --format vue
# Svelte 컴포넌트로 내보내기
npx ericks-design-store export icon-name --format svelte
Claude Code (스킬)
Claude Code 환경에서 다음과 같은 프롬프트를 사용할 수 있습니다:
"사용자 인증을 위한 아이콘을 추천해줘" "검색 아이콘을 React 컴포넌트로 생성해줘" "설정 페이지에 적합한 아이콘 세트를 보여줘"
설치
# 전역 설치 (선택 사항)
npm install -g ericks-design-store
# 또는 npx를 통해 직접 사용
npx ericks-design-store
저장소
- GitHub: https://github.com/erickalfaro/ericks-design-store
- NPM: https://www.npmjs.com/package/ericks-design-store
기여
버그 신청, 기능 제안, 풀 리퀘스트는 GitHub 저장소에서 환영합니다. 자세한 내용은 CONTRIBUTING.md를 참조하세요.
라이선스
MIT