Vite+React(typescript)를 통해 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
import의 쓰기 방법은create-react-app가 제작한 응용과 같다
import { ReactComponent as MyIcon } from './my-icon.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'}}/>
);
}
Reference
이 문제에 관하여(Vite+React(typescript)를 통해 SVG 파일을 구성 요소로 읽는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/longbridge/articles/36ece55292f9da텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)