[React] 리액트 SVG 컴포넌트로 import 방법

 

아이콘은 src/assets 폴더에 home.svg 로 저장함 
./aseets/home.svg 

 

1. img로 svg 적용

1-1. import 

사용하고자 하는 아이콘을 import 한다. 원하는 이름으로 설정할 수 있다.

import home from './assets/home.svg

 

1-2. img 로 svg 생성 

src에 import 한 아이콘명을 넣고, 원하는 className과 alt를 설정하면 끝

<img src={home} className="logo home" alt="Home logo" />

 

1-3. 전체코드 

- 예시이기 때문에, 필요없는 코드들은 삭제하였다.

import './App.css'
import home from './assets/home.svg'

function App() {
  return (
    <>
      <div>
        <img src={home} className="logo home" alt="Home logo" />
      </div>
    </>
  )
}

export default App

 

 

2. svg 직접 가져오기 

- 아래 코드처럼 <Home /> 이런식으로 svg를 사용하고 싶은데 적용했을 때 아무것도 보이지 않았다,,,

import './App.css'
import Home from './assets/home.svg'

function App() {
  return (
    <>
      <div>
        <Home />
      </div>
    </>
  )
}

export default App

 

 

콘솔창 오류 메시지

 

Uncaught InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided

('data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%...') is not a valid name.

An error occurred in the <data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'%20id.....> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

 

1-1. vite-plugin-svgr 설치

npm install vite-plugin-svgr

 

1-2. vite.config.ts 파일에 적용 

- 주석처리 부분 추가

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

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

1-3. import 

- home.svg 뒤에 ?react 를 꼭꼭 적어줘야한다!!!!!!!!! 

import Home from './assets/home.svg?react'

 

1-4. svg 생성 및 전체 코드

import 할 때 정의한 아이콘을  <Home /> 이런식으로 사용할 곳에 코드 작성

import './App.css'
import Home from './assets/home.svg?react'

function App() {
  return (
    <>
      <div>
        <Home />
      </div>
    </>
  )
}

export default App

근데 빨간줄이 계속 import 부분에 생길 수 있다. 이 때 추가 작업이 필요하다.

 

1-5. vite-env.d.ts 파일에 코드 추가 

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

위의 코드 두줄만 추가해주면 된다. 

 

1-6. vite-env.d.ts 전체코드

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

 

구럼 이렇게 잘 나오지요 짜잔 ~~ ~