Vite+React(typescript)를 통해 SVG 파일을 구성 요소로 읽는 방법

create-react-app에서 만든 프로그램이면svg 파일을 기본적으로 구성 요소로 읽을 수 있습니다.
App.tsx

import { ReactComponent as Hart } from './assets/hart.svg';

export function App() {
  return (
    <Hart style={{stroke:'gray', fill:'lightblue', width:'300px', height:'300px'}}/>
  );
}

vite를 통해 만든react 응용 프로그램에서svg 파일을 기본적으로 구성 요소로 읽을 수 없습니다.
따라서svg 파일을 읽는 프로그램 라이브러리를 설치합니다.
도서관이 많지만 2022년 3월 16일에 주요 곳을 골랐다.
no
plugin
Weekly Downloads
Unpacked Size
Last publish
Git Star
1
vite-plugin-svgr
29,992
6.44 kB
2 months ago
93
2
vite-plugin-react-svg
11,253
5.75 kB
a year ago
91
3
Vite SVG loader
10,762
175 kB
2 months ago
134
4

"vite-pluggin-svgr"은 URL, 구성 요소로서 import svg 파일을 사용할 수 있습니다.
import의 쓰기 방법은create-react-app가 제작한 응용과 같다

import { ReactComponent as MyIcon } from './my-icon.svg'

4

'vite-plugen-react-svg'는 1년 전부터 업데이트가 중단되어 이번에 통과되었다

4

'Vite SVG loader'는 URL, 문자열, 구성 요소로서 import svg 파일을 만들 수 있습니다.
나는 포장의 사이즈가 큰 것에 매우 신경을 쓴다

4

// 接尾辞「?url」を使用して、URLとしてインポートする
// '/assets/my-icon.2d8efhg.svg'
import iconUrl from './my-icon.svg?url'

// 接尾辞「?raw」を使用して、文字列としてインポートする
// '<?xml version="1.0"?>...'
import iconRaw from './my-icon.svg?raw'

// 接尾辞「?component」を使用して、コンポーネントとしてインポートする
// <IconComponent />
import IconComponent from './my-icon.svg?component'

문자열로 파일을 읽을 필요가 없기 때문에'1.vite-plugen-svgr'을 사용했습니다.

vite-pluggin-svgr 가져오기

Vite+React+typescript에서vite-plugien-svgr을 가져옵니다.

설치하다.

3

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

2022년 3월 16일vite-plugien-svgr은 v1이다.0.1.

vite.config.ts

vite.config.ts에 다음 항목을 추가합니다.
vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ const svgrPlugin = require('vite-plugin-svgr')

// https://vitejs.dev/config/
export default defineConfig({

  resolve: {
    alias: [{ find: '@', replacement: '/src' }]
  },
  plugins: [
    react({
      jsxImportSource: '@emotion/react'
    }),
+    svgrPlugin({
+      svgrOptions: {
+        icon: true,
+        // ...svgr options (https://react-svgr.com/docs/options/)
+      }
+    })
  ]
})

tsconfig.json

tsconfig.json에 다음 항목을 추가합니다.
tsconfig.json(발췌문)

  "compilerOptions": {
    ・・・
+    "types": ["vite-plugin-svgr/client"]
  },

동작 확인

App.tsx로svg 파일을 읽습니다.
create-react-app에서 만든 프로그램과 같은 쓰기로svg 파일을 읽을 수 있습니다.
App.tsx

import { ReactComponent as Hart } from './assets/hart.svg';

export function App() {
  return (
    <Hart style={{stroke:'gray', fill:'lightblue', width:'300px', height:'300px'}}/>
  );
}