[React] React에서 SVG 다루기 with Styled-components (SVG 컴포넌트화)

 

 

 

React 에서 SVG를 사용하는 방법은 두 가지가 있다. 

 

 

1. <img> tag 사용하기

import Logo from 'assets/icon-logo.svg'

<img src={Logo} />

 

이 방법은 흔히 사용되는 방식으로, SVG 파일을 외부 리소스로서 로드하여 <img> 태그를 통해 사용한다.

이 방법은 간편하고 직관적이지만,  SVG 내부의 요소에 동적으로 접근하거나 스타일을 변경하는 등 SVG의 일부 기능을 활용하기 어렵다는 단점이 있다.

 

 

 

2. ReactComponent 이용하기

import { ReactComponent as Logo } from 'assets/icon-logo.svg'

<Logo />

이 방법은 SVG 파일을 React 컴포넌트로서 불러와 사용하는 것이다.

이렇게 하면 SVG 파일 내부의 요소에 접근하여 스타일을 변경하거나 이벤트를 추가하는 등의 작업이 용이진다. 또한, React 컴포넌트의 일부로 SVG를 사용하기 때문에 JSX 문법을 그대로 활용할 수 있어 편리하다. 

 

 

나의 경우, 한 페이지 내에서 똑같은 모양의 삭제버튼이지만 배경색만 다른 아이콘 두 개가 필요했었다.

따라서 위의 두 번째 방법을 이용해서 SVG 파일을 컴포넌트화 시켜서 스타일을 변경했다.

(만약 위의 두 번째 방법을 몰랐다면 배경색이 다른 png 파일 두 개를 import 해서 썼을 것 같다.)

 

( 배경이 회색과 파란색인 삭제 버튼 두 가지가 필요했다.)

 

 

아이콘에 메인 색상을 변경하고 싶다면 바꾸고자 하는 property에 current 값을 주면 해당하는 property는 props를 통해 사용자가 값을 변경할 수 있게 된다. 

<svg width="22" height="24" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="12" r="10" fill="current" /> // fill="current"
<path d="M7.08044 8L15.0804 16" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
<path d="M14.9999 8L6.99994 16" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
</svg>

 

 

이후 fill 속성에 원하는 색상을 넣으면 된다.

import styled from "styled-components";
import { ReactComponent as CloseIcon } from "assets/deleteIcon.svg";

export const DeleteIcon = styled(CloseIcon)`
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  fill: var(--main-color);
`;

 

 

 

처음에 애를 먹었는데 이유는 SVG 파일을 컴포넌트화 시키지 않은 상태로 진행했기 때문이다.

따라서 계속 색상이 바뀌지 않아서 당황했다. 다음에는 잊지 말아야겠다.

 

 

 

참고: https://create-react-app.dev/docs/adding-images-fonts-and-files