😎 SVG 아이콘 styled‐components에서 사용하기

1. svg 파일 저장

• src/assets 디렉토리 내에 svg 파일을 저장합니다.
• svg 파일 예시 :

  // src/assets/icons/check-line.svg
  <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6.58578 10.6213L12.714 4.49307L13.6568 5.43588L6.58578 12.5069L2.34314 8.26433L3.28595 7.32153L6.58578 10.6213Z" fill="black"/>
  </svg>

2. svg 파일의 width와 height 100%로 바꿔주기

• 100%로 변경한 svg 파일 예시 :

  // src/assets/icons/check-line.svg
  <svg width="100%" height="100%" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6.58578 10.6213L12.714 4.49307L13.6568 5.43588L6.58578 12.5069L2.34314 8.26433L3.28595 7.32153L6.58578 10.6213Z" fill="black"/>
  </svg>

3. styled-component 만들기

• 저장한 svg 파일을 그대로 import 해서 styled 컴포넌트 만들기

import checkLine from "@/assets/icons/check-line.svg";

export const BadgeLabelCheckIcon = styled(checkLine)<{
  $size: keyof typeof sizeTypo;
}>`
  width: ${(props) => props.theme.iconSize?.[sizeTypo[props.$size].icon]};
  height: ${(props) => props.theme.iconSize?.[sizeTypo[props.$size].icon]};
  path {
    fill: ${({ theme }) => theme.colors?.light[feedback-notification]};
  }
`;

• path { fill: } 옵션을 사용하면 svg의 색상을 변경할 수 있음
• (추가) stroke 색상은 path { stroke: }

4. 사용하기

import * as S from "./Badge.Label.style";

export default function BadgeLabel({
  $size,
}: IBadgeLabel) {
  return <S.BadgeLabelCheckIcon $size={$size} />
}