[React] 리액트에서 SVG 사용법

💡 SVG는 색상, 크기 등을 동적으로 조절할 수 있는 장점이 있다

 

방법 1 — src 속성에 svg 경로 입력

---

<svg
  width="16"
  height="16"
  viewBox="0 0 16 16"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path fillRule="evenodd" clipRule="evenodd" d="..." fill="#484848" />
</svg>;

 

💡 파일 경로 지정 참고 내용

❶ JSX 엘리먼트 속성의 루트 기준은 `public` 폴더

만약 `<img>` 태그의 `src` 속성(JSX 태그 속성)에 `src` 폴더에 있는 이미지 파일을 지정하려면…

• 파일 최상단에서 불러온 이미지 파일을 `src` 속성에 할당하거나,
• `src` 속성 안에서 `require()` 사용 ex) `<img src={require('...').default} />`

❷ CSS 파일 루트 폴더 기준은 `src` 폴더

❸ 파일 최상단 `import` 구문에선 `src` 폴더만 처리 가능(`public` 폴더에 있는 파일은 불가)

 

<img> 태그 src 속성에 svg 파일 경로를 적어준다. 경로를 적을 때 public 폴더에 있는 파일은 public 경로명을 적지 않아도 된다. 간편하긴 하지만 상황에 따라 동적으로 색상이나 크기를 변경할 수 없는 단점이 있다.

const Component = () => {
  return <img src={"/assets/arrow.svg"} alt="arrow" />;
};

 

방법 2 — svg 컴포넌트 생성

---

Create-React-App(CRA)으로 생성한 리액트 프로젝트의 빌드 툴은 기본적으로 src 디렉토리만 처리하기 때문에 src 이외의 폴더는 Babel에서 트랜스파일 되지 않는다 — 참고링크

 

기본 사용법

svg 파일을 리액트 컴포넌트로 만들어서 사용하는 방법. 색상이나 크기를 동적으로 변경할 수 있는 장점이 있다. public 폴더에 있는 파일은 import 구문으로 불러올 수 없으므로 svg 파일은 src 폴더로 옮긴 후 import한다.

// svg 파일을 OrderIcon이란 이름의 컴포넌트로 만들어서 불러온다.
import { ReactComponent as OrderIcon } from "./assets/arrow.svg";

 

svg 파일에서 동적으로 변경하고 싶은 속성(props로 받고 싶은 속성)의 값을 current로 바꾼다.

<svg
  width="16"
  height="16"
  viewBox="0 0 16 16"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path fillRule="evenodd" clipRule="evenodd" d="..." fill="current" />
</svg>;

 

불러온 svg 컴포넌트를 선언하고, 원하는 current 값을 props로 전달한다(아래에선 fill 속성 부분). 크기는 width height 속성으로 변경할 수 있다. 참고로 svg는 이미지 대체 텍스트인 alt 속성을 사용할 수 없다. 대신 title 속성을 사용할 수 있다. 마우스를 올리면 title 속성에 명시한 텍스트가 툴팁 형태로 나온다.

// svg 파일을 OrderIcon이란 이름의 컴포넌트로 만들어서 불러온다.
// './svg/arrow.svg'는 상대경로로 'src/assets/arrow.svg'과 같다
import { ReactComponent as ArrowIcon } from "./assets/arrow.svg";

const Component = () => {
  return (
    <Wrapper>
      <ArrowIcon fill="#484848" title="arrow" width="10" height="10" />
    </Wrapper>
  );
};

 

:hover 스타일 변경

:hover 같은 특정 액션에 대해 다른 props(색상 등)를 전달하는 등 조건부 스타일링을 적용할 수 있다. 아래는 styled-components에 적용한 예시.

const Wrapper = styled.div`
  :hover path {
    fill: #b81f18;
  }
`;

 

위처럼 Wrapper 같은 다른 스타일 컴포넌트가 없고 불러온 svg 컴포넌트에 바로 조건부 스타일링을 적용하고 싶다면 새로운 스타일 컴포넌트를 생성한 뒤 extend 하는 방식을 사용하면 된다.

const ExtendedArrowIcon = styled(ArrowIcon)`원하는 스타일 선언`;

 

레퍼런스

---

React.js - svg 다루기   

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요