icon-story

SVG 아이콘을 감지하여 타입스크립트 기반 Storybook으로 변환하는 NPM 패키지입니다.

설치

# 글로벌 설치
npm install -g icon-story

# 또는 프로젝트 내부 설치
npm install --save-dev icon-story

사용 방법

기본 워크플로우

# 1. SVG 아이콘을 스토리북으로 생성
icon-story generate -s ./icons

# 2. 스토리북 의존성 설치
icon-story install

# 3. 스토리북 실행
icon-story start

모든 스토리북 파일은 ./icon-storybook 디렉토리에 생성됩니다. (고정 경로)

명령어 목록

스토리북 생성

# SVG 아이콘을 스토리북으로 변환
icon-story generate -s ./icons

# 제목 및 패턴 지정
icon-story generate -s ./icons -t "브랜드 아이콘" -p "**/*Icon.svg"

스토리북 초기화 (SVG 없이)

# 빈 스토리북 초기화
icon-story init

# 제목 지정
icon-story init -t "내 아이콘 모음"

아이콘 추가

# 기존 스토리북에 새 아이콘 추가
icon-story add -s ./new-icons

# 제목 및 패턴 지정
icon-story add -s ./new-icons -t "추가 아이콘" -p "**/*Icon.svg"

스토리북 의존성 설치

# 스토리북 의존성 설치
icon-story install

스토리북 실행

# 기본 포트(6006)로 스토리북 실행
icon-story start

# 다른 포트로 실행
icon-story start -p 9001

스토리북 빌드

# 정적 스토리북 빌드
icon-story build

# 다른 출력 경로 지정
icon-story build -o custom-output

옵션

generate 및 add 명령어 옵션

| 옵션 | 설명 | 기본값 | | --- | --- | --- | | -s, --source <경로> | SVG 아이콘이 위치한 소스 디렉토리 | (필수) | | -t, --title <제목> | Storybook 제목 | Icons | | -p, --pattern <패턴> | SVG 파일을 찾기 위한 glob 패턴 | **/*.svg |

init 명령어 옵션

| 옵션 | 설명 | 기본값 | | --- | --- | --- | | -t, --title <제목> | Storybook 제목 | Icons |

start 명령어 옵션

| 옵션 | 설명 | 기본값 | | --- | --- | --- | | -p, --port <포트> | 스토리북 서버 포트 | 6006 |

build 명령어 옵션

| 옵션 | 설명 | 기본값 | | --- | --- | --- | | -o, --output <경로> | 빌드 출력 디렉토리 | storybook-static |

API 사용

JavaScript/TypeScript 코드에서 직접 사용할 수도 있습니다.

import { generateIconStories } from 'icon-story';

// 기본 사용법
generateIconStories({
  sourceDir: './icons',
  outputDir: './icon-storybook'
});

// 모든 옵션 사용
generateIconStories({
  sourceDir: './icons',
  outputDir: './icon-storybook',
  storybookTitle: '브랜드 아이콘',
  pattern: '**/*Icon.svg'
});

특징

• SVG 아이콘을 React 컴포넌트로 변환
• 단일 명령어로 생성, 설치, 실행 모두 가능
• 고정된 출력 경로로 간편한 워크플로우
• 폴더 구조를 카테고리로 유지
• 접근성을 위한 title 및 .blind 요소 추가
• SVG 속성을 React 스타일로 변환 (예: fill-rule → fillRule)
• 아이콘 크기 및 색상 조절 가능한 컨트롤 제공
• TypeScript 지원

라이선스

ISC