[React] React + Vite(^v4) 환경에서 svg 설정하기

비-트

※주의 Vite 버전 4이상으로 설명하고 있음 ※

사내에서 Vite를 한번 사용해봤던 적이있는데, (바이트아님 비-트임)

컴파일과 빌드가 굉장히 빨랐던 경험이 있어서 이번에 사이드프로젝트에서 한번 사용해보려 한다.

 

그중 svg사용하는 방법이 Vite 4버전에서 기존과 다른것같아 한번 공유해보고자 한다.

 

렛츠~꼬~

 

1. vite-plugin-svgr 플러그인 설치

vite에서 svg를 편하게 사용하기위해 vite-plugin-svgr plugin을 설치해주자.

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

# yarn
yarn add -D vite-plugin-svgr

# pnpm
pnpm add -D vite-plugin-svgr

2. vite.comfig.ts에 svgr 내용 추가

import path from 'path';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  //요부분 추가
  plugins: [svgr()],
  
  //여기는 절대경로 설정한거 해도되고 안해도됨 자랑하고싶어서 넣음
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
});

 

------- TypeScript를 사용하는 경우 3,4번 진행

3. vite-env.override.d.ts 파일 추가

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

4. vite-env.d.ts 파일 수정

/// <reference types="./vite-env-override.d.ts" />
/// <reference types="vite-plugin-svgr/client" />
/// <reference types="vite/client" />

 

3,4번 얘네 왜 함?

- 타입추론을 위해서 사용한다. 저거 설정안해주면 svg라는 타입없다고 징징거린다.

- vite-env.overrider.d.ts 파일명은 svg.d.ts로 하거나 하고싶은거로 해도 상관없다.

- ~.d.ts 파일 경로는 src/ 폴더밑에 위치하였다.

 

한건 별로 없지만 이러면 svg를 사용할 준비가 끝났다.

 

개꿀~

 

여기까지는 기존이랑 별 차이가 없어보이는데, Vite 4버전 이상부터는 svg파일을 import할때 차이가 있다.

 

기존에 하던대로 svg를 import 해버린다면~

import ViteSvg from '@/assets/vite.svg;

그렇게는 못쓰지롱~

 

> The above error occurred in the </src/assets/vite.svg> component: 
라는 에러가 나오면서 렌더링 되지 않는다,,,

 

흐음,,,

 

그럼 어떻게 해야되나?

import 경로명 뒤에 ?react를 따로 붙여주어야한다.

 

자세한 내용은 공식문서 github에 나와있다.

 

요로코롬~

//경로 뒤에 ?react를 붙여주어야한다.
import ViteSvg from '@/assets/vite.svg?react';

 

 

그럼 정상적으로 화면이 나오는것이 확인된다.

여기서 끝내면 아쉬우므로, svg파일들을 하나로 모아 관리하는 방법도 소개해보고자 한다.

 

유명 UI 라이브러리인 radix를 참고해서 만들어보았다.

radix github

 

우선 폴더구조는 아래와 같다.

|- src
    |- icons (아이콘 폴더)
        |- logo (기능별로 쪼갠 폴더)
            |- ReactLogoIcon.tsx (svg 컴포넌트)
        |- index.ts (icon을 하나의 파일에 모아서 export하는 index 파일)
        |- type.ts (icon 타입)

 

하나하나 파일들을 살펴보자

 

먼저 type.ts 파일이다.

export interface IconProps {
  width: number;
  height: number;
  fill?: string;
  stroke?: string;
  className?: string;
}

 

icon 타입을 정해주었다. 사용하는 사람마다 다르겠지만 크기, 색깔을 커스텀하기위해 width, height, fill, stroke를 props로

받고, hover 같이 css 부수효과가 필요할때 class명으로 관리하기 쉽게 className도 props로 받았다.

 

 

ReactLogoIcon.tsx 컴포넌트이다.

import ReactSvg from '@/assets/react.svg?react';
import { IconProps } from '../types';

const ReactLogoIcon = ({ width, height, fill, stroke, className }: IconProps) => {
  return <ReactSvg className={className} width={width} height={height} fill={fill} stroke={stroke} />;
};

export default ReactLogoIcon;

 

이전에 정의해둔 iconProps를 타입으로 받고 ReactSvg로 컴포넌트를 만들어주었다.

 

index.ts 파일이다.

export { default as ReactLogoIcon } from './logo/ReactLogoIcon';
//다른 svg를 추가할때
export { default as ViteLogoIcon } from './logo/ViteLogoIcon';

 

요런식으로 하나하나씩 export를 해주는데,

이렇게 하면 사용하고자 하는 파일에서 지정해준 이름으로 바로 사용이 가능하다.

 

사용예시)

//지정해둔 ReactLogoIcon으로 바로 import
import { ReactLogoIcon } from '@/icons';

function App() {
  ....
  return (
    ...
    <ReactLogoIcon width={36} height={32} className="logo react" />
  )

 

이런식으로 icon을 모아서 관리할수도있다.

 

한가지 유의할점.

width,height, fill, storke같이 svg의 속성값들을 변경하려면 svg파일의 값들을 변경해주어야한다.

기본적으로 width="36" 이런식으로 고정값이 들어가있을텐데 "current"로 변경해주면된다.

// 변경하고자 하는 props의 값이 고정값이 들어가있으면 값이 바뀌지않는다.
// current로 변경해주면 된다.

//변경전
<svg .... width="36" height="36" <path fill="#000000"></path> </svg>
//변경후
<svg .... width="current" height="current" <path fill="current"></path> </svg>

 

개인적으로 index.ts 파일 하나에서 다 관리하는것보다는

logoIndex.ts 같이 각 기능별 폴더에서 모아서 관리하는 방법도 괜찮을것같다.

 

그럼 오늘은 여기까지-

 

 

 

 

참고 문서

플러그인 API | Vite (vitejs.dev)

Vite

pd4d10/vite-plugin-svgr: Vite plugin to transform SVGs into React components (github.com)

GitHub - pd4d10/vite-plugin-svgr: Vite plugin to transform SVGs into React components

reactjs - Unable to import SVG with Vite as ReactComponent - Stack Overflow

Unable to import SVG with Vite as ReactComponent

Radix Icons (radix-ui.com)

Radix Icons