svg를 컴포넌트로 사용하기

도현수·2024년 10월 20일

기존에는 프로젝트에서 svg를 아래와 같은 방식으로 사용하고 있었다.

import { Link } from "react-router-dom";
import logo from "../assets/logo.svg";

export default function Logo() {
  return (
    <Link to={"/"}>
      <img src={logo} />
    </Link>
  );
}

img 태그를 사용중이었는데, img대신 리액트 컴포넌트로 사용하는건 어떻겠냐는 피드백을 받았다.

img로 쓸 때의 장단점

장점

사용이 간편함: src 속성을 사용해 img 파일 사용할 때처럼 사용
브라우저 캐싱: 브라우저 캐싱이 적용되어서 네트워크요청 절약 가능

단점

스타일 및 애니메이션 제약: DOM 내에서 직접 접근이 불가능

React 컴포넌트로 사용할 때

장점

동적 스타일링 가능

단점

초기 로딩 시간이 길어짐
캐싱 x

클릭하면 색이 바뀌는 효과를 주고 싶었는데 img태그로는 어려워서... 리액트 컴포넌트로 사용하기로 함.

svgr 설치 및 세팅

react + vite에서 svg를 컴포넌트로 사용하기 위해 svgr 패키지를 설치하기로 함.
svgr은 svg를 컴포넌트로 사용할 수 있게 해주는 패키지

패키지 설치

yarn add -D vite-plugin-svgr

vite-env.d.ts 수정. vite-plugin-svgr을 사용할 때 타입스크립트의 타입 참조를 추가해준다.

/// <reference types="vite/client" />
/// <reference types="vite-plugin-svgr/client" />

vite.config.ts 수정. vite 설정 파일에서 사용하는 플러그인 목록에 svgr을 추가한다.

import svgr from 'vite-plugin-svgr'
plugins: [svgr(), react()],

tsconfig.json 수정. Ts 컴파일러에게 추가적인 타입 선언 파일을 포함시키고 svg.d.ts 파일을 포함해서 타입 체크를 하도록 지시함.

{
  "compilerOptions": {
    ...
    "types": ["vite-plugin-svgr/client"],
    ...
  },
  "include": ["src", "svg.d.ts"]
}

svg.d.ts 파일 추가. 루트에 추가함. svg파일을 리액트 컴포넌트로 취급하는 설정을 따르도록 함.

declare module '*.svg' {
  const content: React.FC<React.SVGProps<SVGElement>>
  export default content
}

이제 사용 가능!

import { Link } from "react-router-dom";
import Logo from "../assets/logo.svg?react";

export default function AppLogo() {
  return (
    <Link to={"/"}>
      <Logo />
    </Link>
  );
}