\n\n\n```\n\n## 🎯 실전 예제\n\n### 네비게이션 메뉴\n\n```tsx\nimport { HomeIcon, UserIcon, SettingsIcon } from '@designbasekorea/icons';\n\nfunction Navigation() {\n return (\n \n );\n}\n```\n\n### 상태 표시\n\n```tsx\nimport { CheckIcon, CloseIcon, WarningIcon } from '@designbasekorea/icons';\n\nfunction StatusBadge({ status }) {\n const icons = {\n success: ,\n error: ,\n warning: \n };\n \n return {icons[status]}
;\n}\n```\n\n### 알림 아이콘 (Badge)\n\n```tsx\nimport { BellIcon } from '@designbasekorea/icons';\n\nfunction NotificationIcon({ count }) {\n return (\n \n \n {count > 0 && (\n \n {count}\n \n )}\n
\n );\n}\n```\n\n## 📦 Export 형식\n\n| 형식 | 경로 | 설명 |\n|------|------|------|\n| ESM | `dist/index.esm.js` | ES Module (React 컴포넌트) |\n| CJS | `dist/index.js` | CommonJS |\n| Types | `dist/index.d.ts` | TypeScript 타입 정의 |\n| SVG 원본 | `svg/` | 원본 SVG 파일들 |\n| Manifest | `dist/icon-manifest.json` | 카테고리·태그 메타데이터 + CDN 경로 ([상세 가이드](./docs/manifest-integration.md)) |\n\n### Manifest 활용\n\n- WordPress, Next.js 등 웹 프로젝트에서 `https://cdn.jsdelivr.net/npm/@designbasekorea/icons@<버전>/dist/icon-manifest.json` URL로 불러와 검색/필터 UI 구성\n- 각 아이콘 변형(라인, 필드 등)마다 `dist/svg/<파일명>` 상대 경로 및 `cdn.jsdelivr`, `unpkg` 링크가 포함되어 있어 다운로드 버튼 구현이 간단합니다.\n- `searchText` 필드를 이용해 태그/키워드 통합 검색 인덱스를 생성할 수 있습니다.\n- Figma 플러그인에서는 manifest → SVG URL → `figma.createNodeFromSvg` 순서로 삽입 가능합니다.\n\n## 🔗 관련 패키지\n\n- [@designbasekorea/icons-webfont](../icons-webfont) - 아이콘 웹폰트 (HTML/CSS 사용)\n- [@designbasekorea/ui](../ui) - UI 컴포넌트 (아이콘 함께 사용)\n\n## 🆚 React vs Webfont\n\n### React 컴포넌트 (@designbasekorea/icons) - 현재 패키지\n**장점**:\n- ✅ TypeScript 지원\n- ✅ Props로 동적 제어 (size, color, strokeWidth)\n- ✅ Tree shaking 지원 (번들 최적화)\n- ✅ React 이벤트 핸들러 사용 가능\n\n**단점**:\n- ❌ React 프로젝트에서만 사용 가능\n\n```tsx\n\n```\n\n### Webfont (@designbasekorea/icons-webfont)\n**장점**:\n- ✅ 순수 HTML/CSS에서 사용 가능\n- ✅ React 없이 사용 가능\n- ✅ CSS로 스타일링\n\n**단점**:\n- ❌ 동적 제어 제한적\n- ❌ 전체 폰트 로드 필요\n\n```html\n\n```\n\n## 🔄 버전 히스토리\n\n### 0.1.1 (Latest)\n- ✅ 100+ SVG 아이콘 제공\n- ✅ React 컴포넌트 형태로 제공\n- ✅ TypeScript 타입 정의 포함\n- ✅ Tree shaking 지원\n\n## 📄 라이선스\n\nMIT\n\n","readmeFilename":"README.md"}