SVGProps<SVGSVGElement>
는 React에서 SVG 요소(svg
)의 모든 속성을 포함하는 타입이다.
즉, SvgBookMarkIcon
컴포넌트는 SVGProps<SVGSVGElement>
를 상속받아 SVG 태그에 적용 가능한 모든 속성을 props
로 받을 수 있다.
width
, height
, fill
, stroke
, className
등)style
, aria-label
, role
등)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
에 따라 크기가 조정됨.<SvgBookMarkIcon width={40} height={40} />
🔹 설명:
40px × 40px
로 설정.stroke
속성 사용)<SvgBookMarkIcon stroke="red" />
🔹 설명:
red
)으로 변경.className
사용)<SvgBookMarkIcon className="text-blue-500 w-8 h-8" />
🔹 설명:
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임을 명시.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="북마크 아이콘" /> |