svgr를 React Component로 사용하기(vite 이용)

$ npm i vite-plugin-svgr

먼저 svgr를 설치해 준 다음, vite.config.js에 다음과 같이 작성해 줍니다.

vite.config.js

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import svgr from 'vite-plugin-svgr' //✅

// https://vitejs.dev/config/
const __dirname = 'src'
export default defineConfig({
  plugins: [react(), svgr()], //✅
  resolve: {
    // 절대 경로 설정
    alias: [{ find: '~', replacement: resolve(__dirname) }],
  },
})

다음과 같이 세팅을 완료하면,

import styled from 'styled-components'
import { ReactComponent as LikeIcon } from '../assets/like.svg'
import { ReactComponent as DeleteIcon } from '../assets/delete.svg'
import DummyData from '../assets/dummyData'


const ImageModal = () => {
  const { largeImageURL } = DummyData.hits[0]
  return (
    <Modal>
      <DeleteIcon width="24px" cursor="pointer" fill="#FFFFFF" />
    </Modal>
  )
}

export default ImageModal

다음과 같이 { ReactComponent as DeleteIcon } 를 통해 바로 React Component 처럼 사용하실 수 있습니다!