figma 에서 추출한 svg 파일을 react에서 렌더링 하는 방법을 기록한 포스팅입니다.

svg 뽑아 내기!

먼저 figma에 있는 간단한 아이콘은 svg로 추출 (내보내기) 해보자

위 일기 아이콘을 svg로 뽑을 라면 오른쪽 편에 있는 Export 기능을 이용하면된다.

Export 의 svg 설정이 잘 되어있는지 확인하고 export 하여 다운로드 받는다.

파일 이름을 취향껏 바꿔주고 svg 파일을 확인해보자

image 태그의 data 부분이 너무 길어 사진으로 대체 하였다.

이렇듯 svg 파일은 사실 태그와 속성 등으로 이루어져있다!

1. 리액트 컴포넌트로 직접 만들어 사용하기

svg 파일의 내용을 그대로 복사 붙혀 넣기 하여 하나의 새로운 컴포넌트를 만들어서 사용해도 좋다.

주의점 ❗

xlink:href 같은 속성은 react에서 그대로 표현할수 없다.

xlinkHref 으로 바꿔서 표현해야 에러가 나지 않는다.

이쁘게 잘 나온다 ^^

2. svg 파일 자체를 컴포넌트로 사용하기

react에서는 svg 파일을 Component 자체로 사용할 수 있게 import 할수 있는 기능이 있다.

import { ReactComponent as DiaryIcon } from "../assets/navbar/diary_icon.svg";

위처럼 파일 자체를 ReactComponent 로 import 하여 사용하고 싶은 명(DiaryIcon 등)으로 바꾸어 직접 컴포넌트처럼 사용하면 된다 아래의 실 사용 코드를 보자

return (
  <div
    onClick={() => onClick(value)}
    className={
      "max-w-36 md:max-w-56 w-full h-full flex flex-col justify-center"
    }
  >
    <IconWrapper>
      <DiaryIcon opacity={isSelected ? 1 : 0.2} />
    </IconWrapper>
    <MenuName name={name} isSelected={isSelected} />
  </div>
);

위처럼 다른 컴포넌트와 똑같이 사용 가능하다.

번외 svg 컴포넌트에 속성 부여 하기

2번째 방법에 보면 <DiaryIcon opacity={isSelected ? 1 : 0.2} /> 부분에서 opacity를 속성으로 주입한 것을 볼 수 있다.

이렇게 svg 속성을 컨트롤을 하고 싶다면 svg 루트 태그에 속성을 current로 설정해두면 된다.

current로 설정한 아래 svg 파일을 보자

<svg
      width="40"
      height="40"
      fill="none"
      opacity="current" // 여기임!!
      xmlns="http://www.w3.org/2000/svg"
      xlinkHref="http://www.w3.org/1999/xlink"
    >
</svg>

그리고 위 코드처럼

<DiaryIcon opacity={isSelected ? 1 : 0.2} />

opacity를 속성으로 부여 하면 아래와 같은 상태 변화도 감지하여 리렌더링 해준다.!

24 07 11 추가 )

Svg 컴포넌트가 렌더링이 안될때!

위처럼 만들었는데 렌더링이 안되는 이슈가 있었다…. 문제 코드는 아래와 같다.

const AiProfileIcon = (props) => (
  <svg
    width={50}
    height={50}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    {...props}
  >
    <rect
      x={0.11084}
      y={0.111115}
      width={49.7778}
      height={49.7778}
      fill="url(#pattern0_1297_1687)"
      className="__image138"
    />
    <defs>
      <pattern
        patternContentUnits="objectBoundingBox"
        width={1}
        height={1}
        className="__pattern0_1297_1687"
      >
        <use xlinkHref="#image0_1297_1687" transform="scale(0.00195312)" />
      </pattern>
      <image
        data-name="image.png"
        width={512}
        height={512}
        xlinkHref="..."
        className="__image0_1297_1687"
      />
    </defs>
  </svg>
);

export default AiProfileIcon;

주위 해야 할 부분은 pattern 태그와 image 태그이다…

id 속성을 확실히 정해주자!

rect 태그의 fill 속성을 보면 id값을 이용해 정의하는것을 볼수 있다.

fill="url(#pattern0_1297_1687)" // 하지만 id가 pattern0_1297_1687인 태그는 어디??

또한 pattern 태그 안 xlinkHref 속성의 id도 살펴보자

<use xlinkHref="#image0_1297_1687" transform="scale(0.00195312)" />

id 를 추가 해주자…

• pattern 에 추가!

  	<pattern
      id={"pattern0_1297_1687"}
      patternContentUnits="objectBoundingBox"
      width={1}
      height={1}
      className="__pattern0_1297_1687"
    >

• image 에 추가!

  <image
    id={"image0_1297_1687"}
    data-name="image.png"
    width={512}
    height={512}
    xlinkHref="..."
    className="__image0_1297_1687"
  />

잘나온다 ^^