BWG Icons

SVG 작업자가 이 프로젝트를 사용할 때 필요한 최소 절차만 정리했습니다.

작업 흐름 요약

1. public/에 SVG 파일을 추가한다.
2. npm run generate로 아이콘 컴포넌트를 생성한다.
3. 생성된 컴포넌트를 src/index.ts에서 export 하여 패키지로 배포한다.

SVG 파일 규칙

• 파일 위치: public/
• 파일명 규칙: ico-bwg-이름.svg
  • 예시: ico-bwg-add-folder.svg, ico-bwg-building.svg
• 파일명은 자동으로 컴포넌트명으로 변환됨
  • 예: ico-bwg-add-folder.svg → IcoBwgAddFolder
• ico-btn- 접두사는 자동으로 ico-bwg-로 변경됨

SVG 작성 가이드

• width, height, fill은 필요하면 넣어도 되지만, 빌드 시 아이콘 컴포넌트에서 width="1em", height="1em", fill="currentColor"로 덮어씌워집니다.
• 주석은 <!-- 주석 --> 형태로 넣을 수 있으나, 최적화 도구 사용 시 제거될 수 있습니다.

생성 명령

npm run generate

실행 결과:

• src/icons/*.tsx 파일이 자동 생성됨
• src/index.ts가 자동으로 재생성됨

사용 예시 (참고)

import { IcoBwgAddFolder } from "@bwg-ui/icons";

<IcoBwgAddFolder size={16} color="#333" />

전체 아이콘 미리보기 (소비 프로젝트용)

import { IconPreview } from "@bwg-ui/icons";

<IconPreview />

복사 콜백과 스타일 옵션 예시:

import { IconPreview } from "@bwg-ui/icons";

<IconPreview
  backgroundColor="#fff"
  padding={24}
  onCopy={(text) => alert(`${text} 복사됨`)}
/>;

PDF 가이드 배포 (중앙관리)

1. 이 프로젝트에 PDF를 추가한다.
   • 위치: public/docs/
   • 예시: public/docs/icons-guide.pdf
2. npm run build 실행 시 PDF가 자동으로 임베드되며 dist/docs/로도 복사된다.
3. 소비 프로젝트에서는 IconPreview만 사용하면 자동으로 다운로드 링크가 노출된다.

PDF 링크를 숨기고 싶으면:

<IconPreview showDownload={false} />