React SVG component 생성 & onClick 클릭이벤트 발생시키기 (ts)

React에서 SVG를 사용하는 방법

-> component로 만들어서 사용하면 된다.

실제 도입 방법

svg 파일을 열어보면 다음과 같이 생겼다.

 <svg
      width="20"
      height="21"
      viewBox="0 0 20 21"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g id="Exclude">
        <path
          id="Exclude_2"
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M10 20.5C15.5228 20.5 20 16.0228 20 10.5C20 4.97715 15.5228 0.5 10 0.5C4.47715 0.5 0 4.97715 0 10.5C0 16.0228 4.47715 20.5 10 20.5ZM8.31235 6.10957C8.09672 5.93706 7.78207 5.97202 7.60957 6.18765C7.43706 6.40328 7.47202 6.71793 7.68765 6.89043L12.1996 10.5L7.68765 14.1096C7.47202 14.2821 7.43706 14.5967 7.60957 14.8123C7.78207 15.028 8.09672 15.0629 8.31235 14.8904L13.3123 10.8904C13.431 10.7955 13.5 10.6519 13.5 10.5C13.5 10.3481 13.431 10.2045 13.3123 10.1096L8.31235 6.10957Z"
          fill="#CAE2FE"
        />
      </g>
    </svg>

위 파일을 직접 컴포넌트로 만들어서 사용하면 된다. 사용법은 다음과 같다.

SVG component

• 주의할 점 : JS에서 전달되는 속성은 - 방식이 아니라 CamelCase 방식으므로 속성을 바꿔줘야 한다!

function IconTomorrow() {
  return (
    <svg
      width="20"
      height="21"
      viewBox="0 0 20 21"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g id="Exclude">
        <path
          id="Exclude_2"
          fillRule="evenodd"
          clipRule="evenodd"
          d="M10 20.5C15.5228 20.5 20 16.0228 20 10.5C20 4.97715 15.5228 0.5 10 0.5C4.47715 0.5 0 4.97715 0 10.5C0 16.0228 4.47715 20.5 10 20.5ZM8.31235 6.10957C8.09672 5.93706 7.78207 5.97202 7.60957 6.18765C7.43706 6.40328 7.47202 6.71793 7.68765 6.89043L12.1996 10.5L7.68765 14.1096C7.47202 14.2821 7.43706 14.5967 7.60957 14.8123C7.78207 15.028 8.09672 15.0629 8.31235 14.8904L13.3123 10.8904C13.431 10.7955 13.5 10.6519 13.5 10.5C13.5 10.3481 13.431 10.2045 13.3123 10.1096L8.31235 6.10957Z"
          fill="#CAE2FE"
        />
      </g>
    </svg>
  );
}

export default IconTomorrow;

위의 컴포넌트를 가져다 쓰면 된다.

SVG component에서 onClick 이벤트 발생시키기

방법이 크게 2가지다.

1. svg 컴포넌트를 div나 span으로 감싸서 onClick 이벤트 발생시키기
2. 이벤트를 직접 svg tag에게 전달하기

2번 방법을 구현하는 방법은 다음과 같다. TS 환경이어서 전달하는 props를 type으로 전달해주었다.

type IconTomorrowProps = {
  onClick: () => void;
};
function IconTomorrow(props: IconTomorrowProps) {
  return (
    <svg
      width="20"
      height="21"
      viewBox="0 0 20 21"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g id="Exclude">
        <path
          onClick={props.onClick}
          id="Exclude_2"
          fillRule="evenodd"
          clipRule="evenodd"
          d="M10 20.5C15.5228 20.5 20 16.0228 20 10.5C20 4.97715 15.5228 0.5 10 0.5C4.47715 0.5 0 4.97715 0 10.5C0 16.0228 4.47715 20.5 10 20.5ZM8.31235 6.10957C8.09672 5.93706 7.78207 5.97202 7.60957 6.18765C7.43706 6.40328 7.47202 6.71793 7.68765 6.89043L12.1996 10.5L7.68765 14.1096C7.47202 14.2821 7.43706 14.5967 7.60957 14.8123C7.78207 15.028 8.09672 15.0629 8.31235 14.8904L13.3123 10.8904C13.431 10.7955 13.5 10.6519 13.5 10.5C13.5 10.3481 13.431 10.2045 13.3123 10.1096L8.31235 6.10957Z"
          fill="#CAE2FE"
        />
      </g>
    </svg>
  );
}

export default IconTomorrow;

SVG 태그 내에서 사용 가능한 속성은 MDN 공식문서 - SVG Attribute reference를 참고하면 된다.