📦 chore: Icon 정리 및 @svgr/cli 적용

[bbearcookie]

🧩 이슈 번호

• close Icon 정리 #37

✅ 작업 사항

• 기존의 vite-plugin-svgr 제거
• @svgr/cli 설치 및 설정
  • svg 파일을 리액트 컴포넌트로 변환해주는 도구에요.
• 기존 방식으로 svg를 사용하던 부분에 새로운 SVG 컴포넌트 적용
• 현재 앱에 존재하는 아이콘을 한 눈에 확인할 수 있는 스토리북 작성
• 기존의 svg 파일을 /src/assets/icons/raw 로 이동

#37 이슈에서 svg를 다루는데 있어서의 어려움을 적어 놓았어요..
이 부분을 해결하기 위해서 리액트 컴포넌트로 SVG를 다루는 방법을 생각했고,
변환하는 과정에 어느 정도는 자동화할 수 있도록 @svgr/cli 를 적용했어요.
(그래도 width, height를 props로 받을 수 있게 하는 부분과 fill, stroke 등의 색상을 currentColor 로 변환하는 과정은 직접 수행해야 하는 듯 해요!!)

👩‍💻 공유 포인트 및 논의 사항

SVG 컴포넌트 추가하는 방법

1. /src/assets/icons/raw 경로에 svg 파일을 추가해요.

2. npm run svgr 커맨드를 입력해요.

• raw 디렉토리에 존재하는 모든 svg 파일이 리액트 컴포넌트로 변환된 형태로 assets/icons 디렉토리에 추가하는 명령어에요.
• 이미 추가된 파일이 있다면 동일한 이름의 기존의 파일을 덮어 쓰지는 않도록 설정 해 놓았어요. (ignoreExisting 옵션)

3. width, height, fill, stroke 등의 속성을 적절하게 props로 받을 수 있도록 설정해요.

• 생성된 결과
  

• 수정한 내용

import type { SVGProps } from 'react';
const SvgSoundMaxFill = ({
  width = 24,
  height = 24,
  fill = 'currentColor',
  stroke = 'currentColor',
  ...props
}: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    width={width}
    height={height}
    {...props}
  >
    <path
      fill={fill}
      d="M4.158 13.93a3.75 3.75 0 0 1 0-3.86 1.5 1.5 0 0 1 .993-.7l1.693-.34a.45.45 0 0 0 .258-.152L9.17 6.395c1.182-1.42 1.774-2.13 2.301-1.938C12 4.647 12 5.572 12 7.42v9.162c0 1.847 0 2.77-.528 2.962-.527.19-1.119-.52-2.301-1.938L7.1 15.122a.45.45 0 0 0-.257-.153l-1.693-.34a1.5 1.5 0 0 1-.992-.7"
    />
    <path
      stroke={stroke}
      strokeLinecap="round"
      strokeWidth={2}
      d="M14.536 8.464a5 5 0 0 1 .027 7.044m4.094-9.165a8 8 0 0 1 .044 11.27"
    />
  </svg>
);
export default SvgSoundMaxFill;

Icons 스토리북

현재 등록되어 있는 모든 svg 아이콘을 한 눈에 확인할 수 있고, 색상이나 크기를 변경해볼 수 있는 스토리 북을 작성했어요.

[github-actions]

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-ggjhrcqisn.chromatic.com/
🚀 React Preview 보러가기: https://sea-of-my-heart-5mrot2mjz-dnd-sea-of-my-heart.vercel.app

[easyhyun00]

와..수고하였습니다! 그동안 svg 아이콘 색상이랑 크기 조절하는 게 어려웠는데 이렇게 하는 방법도 있군요.. 신기하고 많은 거 알아가네요! 이제 svg 아이콘은 크기, 색상을 자유롭게 수정할 수 있겠네요 👍

[easyhyun00]

Approve 합니다