SVG 파일을 React 구성 요소로 변환 🖼️ ->🧩

React에서 SVG 파일 가져오기

React.js 또는 다른 자바스크립트 프레임워크에서 SVG 파일을 가져오는 방법을 모르는 문제에 직면한 적이 있다면 아마도 저와 같은 상황에 처했을 것입니다 😢

그래서 해결책은 무엇입니까? SVGR!

SVGR은 복잡한 변환을 적용하여 SVG 파일을 JSX/React Component로 변환하는 도구입니다.

따라서 기본적으로 SVG 파일을 React Component로 자동 변환합니다! ✨

다음과 같은 SVG 파일이 있다고 가정해 보겠습니다.

<svg
  width="200px"
  height="200px"
  viewBox="0 0 200 200"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
........
........
........
</svg>

바로 이런 형태로 변환됩니다!

import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 200 200" {...props}>
    <path d="" fill="#FFF" />
  </svg>
)

export default SvgComponent

Next.js에서 해봤는데 2단계 프로세스를 거쳐야 했습니다.

먼저 다음을 추가하여 내 next.config.js 파일을 구성해야 했습니다.

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

그런 다음 로고를 SVG로 가져오지만 다음 코드를 작성하여 Home에 React 구성 요소로 작성했습니다.

import Logo from './logo.svg'

const Home = () => (
  <div>
    <Logo />
  </div>
)

그렇게 간단합니다!

SVGR 놀이터

SVGR의 웹사이트에는 SVGR을 패키지로 설치할 필요가 없을 때 개인적으로 여러 차례 사용한 브라우저 내 SVG -> React Component 변환기가 포함되어 있습니다.
https://react-svgr.com/playground/

가장 좋은 학습 방법은 실험입니다! SVGR 웹 사이트를 방문하려면 여기를 클릭하십시오.