[react] react에서 svg 불러오는 방법

[react] react에서 svg 불러오는 방법

 

react에서 이미지 적용을 위해

svg 파일을

불러오는 방법입니다.

 

1. img src에서 불러오는 경우

<img src='/images/mobile/main_home.svg' />

 

2. import 후 img src에서 불러오는 경우

import Home from 'mobile/Home.svg';

<img src={Home} />

 

3. background image에 불러오는 경우

const bgImg = useMemo(() => ({ background: "url('/images/bar.svg') no-repeat center" }), [])
...

<div style={bgImg}>...</div>

 

4. svg를 React 컴포넌트로 사용하는 방법

import { ReactComponent as Car } from "../../../svgImages/car.svg";
...

<Car />

 

• svg를 React 컴포넌트로 사용하였을 경우
  svg의 색상, 크기 커스텀이 가능하고, id를  삽입하여 직접 접근하여 animation effect를 줄 수 있습니다.

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="current"
  height="current"
  viewBox="0 0 77 55"
>
  <path fill="current" d="...." />
</svg>

 

• svg 코드에서 크기를 바꾸려면 width, height에 'current'를 색상을 바꿀 경우 fill에 'current'로 바꿔줍니다.
• current를 바꿔 준 property는 컴포넌트로 사용시에 props로 값을 변경해줍니다.

import { ReactComponent as Car } from "../../../svgImages/car.svg";
...

<Car width="200" height="100" fill="#f5b914" />