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

10898 단어 ReactSVGtech
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'}}/>
      );
    }
    

    좋은 웹페이지 즐겨찾기