Platform Icon Library

플랫폼 아이콘 라이브러리 - React 아이콘 컴포넌트 모음입니다.

📦 설치

npm install platform-icon-library

🚀 사용법

기본 사용

import { VisibilityOnIcon, SearchIcon } from 'platform-icon-library';

function App() {
  return (
    <div>
      <VisibilityOnIcon htmlColor="#007bff" />
      <SearchIcon htmlColor="#28a745" />
    </div>
  );
}

AI 친화적 검색

이 라이브러리는 AI가 아이콘을 쉽게 찾을 수 있도록 설계되었습니다:

카테고리별 아이콘

• 사용자 관련: AccountCircleIcon, PersonIcon, AdminIcon
• 액션: AddIcon, DeleteIcon, EditIcon, SearchIcon
• 네비게이션: ArrowIcon, MenuIcon, HomeIcon
• 상태: CheckIcon, ErrorIcon, WarningIcon
• 미디어: VideoIcon, CameraIcon, PlayIcon
• 시스템: SettingsIcon, GearIcon, ConfigIcon

키워드 검색

AI는 다음 키워드로 아이콘을 찾을 수 있습니다:

• user, account, profile → 사용자 관련 아이콘
• add, plus, create → 추가/생성 아이콘
• search, find, magnifier → 검색 아이콘
• arrow, direction, navigation → 방향 아이콘
• check, success, done → 성공/완료 아이콘

📊 아이콘 통계

• 총 아이콘 수: 258개
• 카테고리: 15개
• 검색 키워드: 100+개

🔧 Props

모든 아이콘은 다음 props를 받습니다:

• htmlColor: 아이콘 색상 (기본값: #888)
• 기타 SVG 속성들 (width, height, className 등)

🛠️ 개발

# 의존성 설치
npm install

# 모든 아이콘 export 생성
npm run generate-exports

# AI 메타데이터 생성
npm run generate-metadata

# 빌드
npm run build

# 개발 모드
npm run dev

📁 파일 구조

dist/
├── index.js              # CommonJS 번들
├── index.esm.js          # ESM 번들
├── index.d.ts            # TypeScript 선언
├── metadata.json         # AI 메타데이터
└── search-index.json     # 검색 인덱스

🤖 AI 사용 가이드

AI가 이 라이브러리를 사용할 때:

1. 의도 파악: "사용자 프로필 아이콘이 필요해요" → AccountCircleIcon
2. 기능 기반: "검색 기능을 위한 아이콘" → SearchIcon
3. 카테고리 기반: "네비게이션 화살표" → ArrowIcon
4. 동의어 활용: "플러스", "추가", "생성" → AddIcon

📄 라이선스

MIT License