Vite TypeScript React에서 SVG 사용하기

 해당 글에서 React(Vite : TypeScript)에서 svg를 사용하는 법에 대해서 확인하겠습니다.

1. vite을 이용해서 react 설치 install하기

- 해당폴더에 vite를 이용해서 React(TypeScript)를 설치합니다

$ npm create vite@latest [프로젝트명]

사진1) Vite를 이용해서 React 설치

2. svg 작성하기

사진2) 작성된 SVG

3. App.tsx에 추가하기

import { useState } from "react";

import "./App.css";

import CrownLogo from "./assets/crown.svg"; // 추가된 코드

import reactLogo from "./assets/react.svg";

import viteLogo from "/vite.svg";

function App() {

const [count, setCount] = useState(0);

return (

<>

<div>

<a href="https://vite.dev" target="_blank">

<img src={viteLogo} className="logo" alt="Vite logo" />

</a>

<a href="https://react.dev" target="_blank">

<img src={reactLogo} className="logo react" alt="React logo" />

</a>

</div>

{/* SVG CrownLogo 추가 */}

<CrownLogo />

<h1>Vite + React</h1>

<div className="card">

<button onClick={() => setCount((count) => count + 1)}>

count is {count}

</button>

<p>

Edit <code>src/App.tsx</code> and save to test HMR

</p>

</div>

<p className="read-the-docs">

Click on the Vite and React logos to learn more

</p>

</>

);

}

export default App;

사진3) 에러 발생

사진3과 같이 Vite을 이용해서 React를 생성시 에러가 발생되는 것을 확인할수 있다.

4. React에 svg파일을 사용할수 있게 셋팅하기

1) vite-plugin-svgr 설치

- vite-plugin-svgr 모듈을 설치합니다. 아래 예시는 npm으로 설치하는 테미널 입니다.

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

공식 문서는 링크를 참고해 주시기 바랍니다.

사진3) vite-plugin-svgr 설치

2) vite-env.d.ts파일 추가

사진4) reference 추가

vite-env.d.ts파일에 "/// <reference types="vite-plugin-svgr/client" />" 를 추가한다.

3) root 경로에 svg.d.ts파일을 작성한다.

declare module "*.svg" {

import React = require("react");

export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;

const src: string;

export default src;

}

위의 코드를 아래 사진처럼 작성한다.

사진5) svg.d.ts파일 작성

4) root경로에 있는 vite.config.ts파일 수정

import react from "@vitejs/plugin-react";

import { defineConfig } from "vite";

import svgr from "vite-plugin-svgr";

// https://vite.dev/config/

export default defineConfig({

plugins: [react(), svgr()],

});

위 코드를 vite.config.ts파일에 작성한다. 

사진6) vite.config.ts파일 작성

5) SVG를 사용한 App.tsx파일 수정

CrownLogo를 import하는 부분에서 아래와 같이 수정한다.

import CrownLogo from "./assets/crown.svg?react"; // 마지막에 "?react"를 추가

이후 실행하면 아래 사진과 같이 CrownLogo(왕관로고)가 정상적으로 보이는 것을 알수 있다.

GitHub Link : https://github.com/Alex-Choi0/vite_react_using_svg_example.git