react 에서 SVG 아이콘 컴포넌트로 사용하기.

svg 파일을 추가하면 element 형태로 나타나는데 이를 컴포넌트화해서 사용하는 방법이다.

 

const Logo = ({ color = "#080405", width = 80, height = 120 }: LogoProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 2929.35 1662.66"
    style={{ width, height }}
  >
  
  ...
  
  </svg>

원하는 색상과 크기에 맞춰 사용할 수 있게 컴포넌트화해서 사용.

 

크기는 style 속성으로 컨트롤하고 색상은 path 부분에 fill 에 적용.