[css] SVG 사용 방법

React 에서 SVG를 사용하는 방법은 다음과 같다.

import Logo from '@assets/images/logo.svg';

...
<img src={Logo} alt='마켓컬리 로고' />

 

위와 같이 img 태그를 사용할 경우, 이미지의 width, height는 스타일로 수정가능하지만 색은 변경하여 사용 할 수 없다.

 

값을 변경하여 사용하려면?

>>

1. 바꾸고자 하는 svg 요소의 값을 current로 수정한다.

<svg width="current" height="current" viewBox="0 0 82 42" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M62.5.965c1.02......" fill="current"/>
</svg>

 

2. current로 바꾼 요소는 사용자가 원하는 값을 넣어 커스텀 사용이 가능하다.

import { ReactComponent as DeleteIcon } from './Delete.svg'

const LogoComponent = () => {
  return (
    <div>
      <DeleteIcon width={200} height={200} fill="#dd9c4f" />
    </div>
  )
}

 

 

 

React SVG 다루기