[ Vite + React ] React SVG 사용

react에서 아이콘 사용시

<img> 태그를 활용하기에는 색을 자유롭게 바꾸지 못해서 색을 자유롭게 바꾸기 위해 SVG 파일을 사용

 

---

Plugin Set

vite plugin 설치

npm install vite-plugin-svgr

 

이후 vite.config.ts 파일에서

vite-plugin-svgr을 import한 후 plugins 에 plugin을 추가

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),svgr()],
})

 

vite-end.d.ts에 

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

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

이후 root directory에 svg.d.ts 파일을 생성하여 module을 설정

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

 

tsconfig.ts 에 생성한 svg.d.ts파일을 포함

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "types": ["vite-plugin-svgr/client"],
  },
  "include": ["svg.d.ts"]
}

---

SVG Component

추가적으로 간단한 svg파일의 코드를 보면 <svg> 태그 안에 각각 아이콘 요소들이 있는데

처음 svg파일을 보면 각 요소들마다 fill이 채워져있다.

 

여기서 fill들을 전부 지워주고 상단 svg에 있는 fill만 남겨두어야 이후 색 변경이 가능하다.

<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="#1C274C" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="6" r="4"/>
<path d="M20 17.5C20 19.9853 20 22 12 22C4 22 4 19.9853 4 17.5C4 15.0147 7.58172 13 12 13C16.4183 13 20 15.0147 20 17.5Z"/>
</svg>

 

이후 사용할 svg파일을 찾아 import 해주며, 뒤에 ?react를 붙혀주어야 한다.

import MoonSVG from '../../assets/icons/moon.svg?react';
import SunSVG from '../../assets/icons/sun.svg?react';

 

이후 import한 svg파일에 fill로 색을 넣어주면 해당 svg파일의 색상을 바꿀 수 있다.

<MoonSVG fill='#000000' />;
<SunSVG fill='#000000' />;

 

이를 활용하여 SVG 아이콘이 들어간 스위치