SVG 컴포넌트화하기

https://velog.io/@a_in/React-SVG-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0

https://tech.socarcorp.kr/dev/2022/09/06/react-icon-component.html

이렇게 SVG 컴포넌트를 만들어서, SVGMap에 값들을 저장만 해두는 방식으로 사용 가능하다.

아래는 예시이다.

import React from 'react';

interface SVGProps {
  width?: string;
  height?: string;
  color?: string;
  name: string;
  onClick?: () => void;
}

interface SVGMap {
  [key: string]: string;
}
const svg: SVGMap = {
  hamberger:
    'M0 0h30v2H0zM0 10h30v2H0zM0 20h30v2H0z',
};

export const SVG: React.FC<SVGProps> = ({ width = '20px', height = '20px', color = '', name, onClick }) => {
  return (
    <svg
      width={width}
      height={height}
      fill={color}
      role='img'
      viewBox='0 0 24 24'
      onClick={onClick}
    >
      <title>{name}</title>
      <path d={svg[name]} />
    </svg>
  );
};

export { svg };