React+Vite에서 vite-plugin-svgr 사용해서 SVG 컴포넌트 만들기

React+Vite 프로젝트 중 svg를 사용 할 경우가 생겼다.

매번 <img /> 태그에 넣어서 사용했지만

더욱 조작하기 쉽게 사용하는 방법 중 vite-plugin-svgr를 이용해 컴포넌트로 만드는방법이 있어 사용해봤다.

블로그 마다 동작하는 코드가 달라 정리를 해볼까한다.

vite-plugin-svgr - 패키지 사이트

✨ 표시가 있는 필수적으로 추가해야한다
(없는 순서는 안해도 되지만 만약 동작이 안될 시 추가 해보는것을 추천드립니다.)

✨ vite-plugin-svgr 설치

npm install --save-dev vite-plugin-svgr

✨ vite.config.ts 파일 수정

import react from '@vitejs/plugin-react'
import path from 'path'
import { defineConfig } from 'vite'
import svgr from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig({
  // plugins에 svgr()을 추가한다.
  plugins: [react(), svgr()],
  resolve: {
    alias: [
       ...
    ]
  }
})

✨ TypeScript 사용 시 추가

vite-env.d.ts 파일에 다음 코드를 추가한다.

(만약 추가 시 tsconfig.json 수정은 안해도 동작은 가능했다. 둘 중에 하나는 ✨필수)

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

svg.d.ts 파일 추가

src/svg.d.ts 파일을 생성한다.

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

tsconfig.json 수정

compilerOptions 안에 "types": ["vite-plugin-svgr/client"] 를 넣어준다.

include 안에 "svg.d.ts"를 넣어준다.

{
  "compilerOptions": {
   ...

    "types": ["vite-plugin-svgr/client"],

    ...
  },
  "include": ["src", "svg.d.ts"],
  ...
}

svg 컴포넌트 사용

import Star from '@/asset/star.svg?react'

export default function main() {
    return (
        <Star />
    )
}

svg를 컴포넌트처럼 사용 할 수있다.

처음 적용 시킬때는 패키지 사이트에서 알려주는 그대로 했지만 적용이 안되다가 열심히 구글링 하고 삽질 하고 적용시키고 뒤늦게 정리를 해보니 설명 그대로 해보니 오류가 발생하지 않는다.

돌고돌아 문서로 돌아왔다. 더 열심히 해야겠다.