SVGProps란?

SVGProps<SVGSVGElement>는 React에서 SVG 요소(svg)의 모든 속성을 포함하는 타입이다.
즉, SvgBookMarkIcon 컴포넌트는 SVGProps<SVGSVGElement>를 상속받아 SVG 태그에 적용 가능한 모든 속성을 props로 받을 수 있다.

SVGProps를 사용하면 얻을 수 있는 장점

• 기본적으로 모든 SVG 속성을 사용할 수 있음 (width, height, fill, stroke, className 등)
• 유연하게 커스텀 스타일 적용 가능 (style, aria-label, role 등)
• 재사용성이 높아짐 (SVG 속성을 따로 정의하지 않아도 자유롭게 사용 가능)

---

2. SvgBookMarkIcon 사용 예시

① 기본 사용 (기본 크기 & 색상)

import type { SVGProps } from 'react';
const SvgBookMarkIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="1em"
    height="1em"
    fill="none"
    viewBox="0 0 22 28"
    {...props}
  >
    <path
      stroke="#000"
      strokeWidth={2.5}
      d="M11.725 20.36 11 19.844l-.725.516-8.525 6.072V1.607h18.5v24.825z"
    />
  </svg>
);
export default SvgBookMarkIcon;

____________________________________________________________________
import SvgBookMarkIcon from '@/components/Icons/SvgBookMarkIcon';

const App = () => {
  return (
    <div>
      <h2>북마크 아이콘</h2>
      <SvgBookMarkIcon />
    </div>
  );
};

export default App;

🔹 설명:

• 기본적으로 1em x 1em 크기의 SVG 아이콘이 렌더링됨.
• 부모 요소의 font-size에 따라 크기가 조정됨.

---

② 크기 조정 (width, height)

<SvgBookMarkIcon width={40} height={40} />

🔹 설명:

• 아이콘의 크기를 40px × 40px로 설정.

---

③ 색상 변경 (stroke 속성 사용)

<SvgBookMarkIcon stroke="red" />

🔹 설명:

• 아이콘의 테두리 색상을 빨간색(red)으로 변경.

---

④ 클래스 추가 (className 사용)

<SvgBookMarkIcon className="text-blue-500 w-8 h-8" />

🔹 설명:

• Tailwind CSS를 사용하여 크기와 색상을 조정 (w-8 h-8은 32px × 32px).
• text-blue-500을 사용하면 currentColor가 적용될 경우 파란색이 됨.

---

⑤ 스타일 직접 적용 (style 속성 사용)

<SvgBookMarkIcon style={{ stroke: 'green', width: '50px', height: '50px' }} />

🔹 설명:

• stroke: green: 테두리 색상을 초록색으로 변경.
• width: 50px, height: 50px: 크기를 50px × 50px로 조정.

---

⑥ 접근성 속성 추가 (aria-label & role)

<SvgBookMarkIcon aria-label="북마크 아이콘" role="img" />

🔹 설명:

• aria-label="북마크 아이콘": 스크린 리더에서 "북마크 아이콘" 이라고 읽도록 설정.
• role="img": 이 요소가 이미지 역할을 하는 SVG임을 명시.

---

3. SVGProps 덕분에 가능해진 것

속성	설명	예제
width	SVG의 너비 설정	<SvgBookMarkIcon width={32} />
height	SVG의 높이 설정	<SvgBookMarkIcon height={32} />
fill	내부 색상 변경	<SvgBookMarkIcon fill="blue" />
stroke	테두리 색상 변경	<SvgBookMarkIcon stroke="red" />
className	CSS 클래스 적용	<SvgBookMarkIcon className="text-gray-500" />
style	인라인 스타일 적용	<SvgBookMarkIcon style={{ stroke: 'black' }} />
aria-label	접근성 라벨 추가	<SvgBookMarkIcon aria-label="북마크 아이콘" />

---