[React] React에서 여러개의 svg 사용하기(with Typescript)

1. 서론

전에 프로젝트 할때는 svg 가 복잡하다는 이유로 png 를 사용했었다. 

사용하기는 편했지만 png는 일반적으로 파일 크기가 크기 때문에 최적화적인 측면에서 좋지 않았다.

그래서 이번에 하는 프로젝트에서 최적화를 위해 아이콘을 png 가 아닌 svg 를 사용하고자 한다.

리액트에서 svg 를 불러오는 방법은 여러가지가 있지만

이번 프로젝트에서는 카테고리 종류에 따른 아이콘을 보여주기 위해 여러개를 사용하는 법에 대해서만 다루고자 한다.

 

2. 본론

이번 프로젝트에서 카테고리가 대략 6개 정도 되는데 

물론 6개 정도라면 svg 를 하나하나 import 를 해도 되지만 뭔가 개발자스럽지 않고 하드코딩같다는 생각이 들어서 

여러 개의 svg 를 불러올 수 있는 방법을 구글링 했다.

그 중 하나가 svg 를 저장하는 배열을 만들고 카테고리에 따라 다른 아이콘을 보여주는 함수를 만드는 것이다.

 

1. 아이콘 배열 만들기

먼저 블로그에서 알려준 방법대로 카테고리에 따른 아이콘 배열을 만들었다.

타입스크립트를 이용했기 때문에 타입도 지정해주었다.

svg 정보를 저장하는 icon 이라는 메서드는 어쨋든 svg 태그를 리턴받기 때문에

JSX.Element 를 리턴받는다는 타입을 지정한다. 

interface ChatIcon {
  category : string;
  icon : () => JSX.Element;
}

// 채팅방 svg 아이콘
export const chaticons : ChatIcon [] = [
  {
    category: "채팅방카테고리 예시",
    icon: () => (
      <svg
        width="35"
        height="35"
        viewBox="0 0 35 35"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
      >
        <rect width="35" height="35" fill="url(#pattern0_271_971)" />
        <defs>
          <pattern
            id="pattern0_271_971"
            patternContentUnits="objectBoundingBox"
            width="1"
            height="1"
          >
            <use xlinkHref="#image0_271_971" transform="scale(0.015625)" />
          </pattern>
          <image
            id="image0_271_971"
            width="64"
            height="64"
            xlinkHref="data:image/png;base64, ....."
          />
        </defs>
      </svg>
    ), /// 생략....
  }]

 

2. 아이콘 렌더링

부모로 부터 채팅방에 대한 정보를 받는 props 를 받고 그 props 에 있는 카테고리 정보에 따라

각각 다른 아이콘을 보여주고자 했다.

그래서 getIcon이라는 함수를 만들고 카테고리에 알맞은 아이콘 svg 태그를 리턴받는 형식으로 구현했다.

 

import { chaticons } from "../../../assets/chaticon";
import { ChatRoomInfo } from "../../../types/chatlist";

interface ChatRoomProp {
  room: ChatRoomInfo;
}

export default function ChatRoom({ room }: ChatRoomProp) {
  // 카테고리마다 다른 아이콘 렌더링해주는 함수
  const getIcon = (category : string) => {
    const icon = chaticons.find(icon => icon.category === category);
    return icon ? icon.icon() : null;
  }

  return (
    <li>
      <figure className="chatroom-icon">
        {getIcon(room.category)}
      </figure>
      <div>
        <h4 className="chatroom-title">{room.meeting_title}</h4>
        <div className="chatroom-capacity">
          <span className="xi-group"></span>
          <span>{room.capacity}</span>
          <span>명 참여</span>
        </div>
      </div>
    </li>
  );
}

3. 결과

아래의 사진처럼 카테고리에 따라서 원하는 아이콘이 나오도록 구현되었다.

 

3. Reference

https://velog.io/@rootcho/React%EC%97%90%EC%84%9C-svg%ED%8C%8C%EC%9D%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B2%95

React에서 svg파일 사용하는 법 (create-react-app)

https://www.adobe.com/kr/creativecloud/file-types/image/comparison/png-vs-svg.html

PNG와 SVG 파일의 차이점 | Adobe