init: svg sprite 세팅

[yeeeww]

#️⃣ Related Issue

Closes #10

☀️ New-insight

아이콘 목록 자동 생성 스크립트의 역할은 뭘까?(/general-icon-list.ts)

📍svg 아이콘 목록을 자동 생성해주는 스크립트

1. ../assets/svgs 디렉토리 안에 있는 .svg 파일 목록을 읽음

2. 각 파일의 이름(확장자 제외)을 아이콘 이름으로 추출

3. iconNames 배열과 IconName 타입을 자동으로 생성

4. ../constants/icon-list.ts에 작성

❓왜 icon-list가 필요한가?

아이콘 이름이 모두 나열되어 있으며, IDE 자동 완성에 유리하게 as const로 고정된다.

type IconName =
  | 'ic-arrow-left-18'
  | 'ic-arrow-left-24'
  | ...
  | 'ic-x';

'ic-arrow-left-18' 같은 문자열만 유효한 name으로 간주하여 실수로 오타를 내거나, 존재하지 않는 아이콘을 넣으면 컴파일 단계에서 타입스크립트가 경고를 해준다.

<Icon name="ic-home-filled" /> ✅
<Icon name="ic-homee-filled" /> ❌ 타입 에러!

따라서 타입 안정성, 자동 완성, 유지 보수성 측면에서 icon-list를 작성하는 것이 바람직하다!

💎 PR Point

• 스프라이트 플러그인은 커스텀이 유연한 @pivanov/vite-plugin-svg-sprite으로 변경
• 아이콘 목록 자동 생성 스크립트 구현
• 아이콘 색상, 사이즈, 너비, 높이, 회전값, aria-hidden은 props로 넘겨 받을 수 있게 추가

⭐아이콘 사용 방법

1. pnpm install
2. assests>svgs 폴더 안에 svg파일을 넣는다.
3. svg 파일 안에 의 속성을 fill="currentColor"로 변경한다. --> 이렇게 해야 아이콘 색 지정 자유롭게 할 수 있음.
4. 아이콘 사용하고 싶은 파일에 아이콘 공통 컴포넌트를 import하고 컴포넌트 name 속성은 파일명과 동일하게 해준다.
5. 아이콘 목록 추가는 로컬 실행 시 자동으로 추가되게 구현하였으나, 직접 추가하고 싶다면 pnpm generate:icons 명령어로도 가능하다.
6. 참고 아이콘 사이즈는 rem 단위로 수정하였기 때문에 1.6rem 이면 width, height 또는 size를 1.6으로 지정해주시면 됩니다.

사용 예시!!

name은 svg 파일과 동일하게 지정해주시고, size는 자유롭게 지정 가능합니다.

📸 Screenshot

위와 같이 확인 가능합니다.

Summary by CodeRabbit

• New Features

  • SVG 아이콘을 쉽게 사용할 수 있는 Icon 컴포넌트가 추가되었습니다.
  • 자동으로 SVG 아이콘 목록을 생성하는 기능이 도입되었습니다.
  • 아이콘 목록과 타입이 코드 내에서 바로 활용 가능하도록 제공됩니다.

• 개선 사항

  • 빌드 및 배포 자동화(GitHub Actions)를 통해 Cloudflare Pages로 배포가 이루어집니다.
  • pre-commit 시 자동 코드 포매팅이 적용됩니다.

• 기타

  • SVG 스프라이트 플러그인이 적용되어 아이콘 관리가 효율적으로 개선되었습니다.
  • 개발 환경 설정 및 스크립트가 일부 개선되었습니다.