React에서 SVG 사용자 지정

React에서 SVG 이미지를 표시하기 위해 몇 가지 방법을 시도했고 내 선택을 공유하고 싶습니다.

SVG 아이콘 모음이 포함된 패키지

img 태그: <img src="someSvg" alt="some text" />

svg 태그를 JSX에 복사/붙여넣기: <svg>...</svg>

SVG를 React 구성 요소로 가져오기 <– 내 선택

SVG를 React 구성 요소로 사용할 때의 이점

SVG를 React 구성 요소로 사용하기로 선택한 이유는 무엇입니까?

아이콘 모음을 설치할 필요가 없습니다.

소품을 통해 사용자 정의를 할 수 있습니다.

width prop을 통해 CSS로 다른 스타일을 정의할 수 있습니다.

SVG 파일을 복사/붙여넣기할 필요가 없습니다.

Create React 앱 사용

CRA를 사용하면 SVG 파일을 가져와 바로 React 구성 요소로 사용할 수 있습니다.
height

- import logo from "./logo.svg";
+ import { ReactComponent as Logo } from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
-       <img src={logo} alt="logo" />
+       <Logo stroke="#f60" strokeWidth={10} width={500} />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

스트로크 변경 로고

Create React App 없이 사용하기

Create React App은 SVG 파일을 React 구성 요소로 가져오기 위해 백그라운드에서 SVGR을 사용하므로 지금 동일한 작업을 수행해 보겠습니다.

1 - fill이라는 Webpack 로더를 설치합니다.

yarn add --dev @svgr/webpack

2 - 스트로크 업데이트

 ...
  module: {
    rules: [
      ...
      // SVG loader
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              titleProp: true,
            },
          },
          'file-loader',
        ],
      },
    ],
  },
  ...

참고: SVG 파일을 정상적으로 가져오려는 경우에 대비하여 strokeWith 와 함께 사용합니다.

3 - SVG 파일을 React 구성 요소로 가져오기

import { ReactComponent as SomeImage } from 'path/to/image.svg'

...

<SomeImage width={100} height={50} fill="pink" stroke="#0066ff" />

학점

SVG를 React 구성 요소로 변환 — SVGR

파일 로더 — className

Harpal Singh의 Unsplash님의 표지 사진

결론

요약하면 SVG를 React 구성 요소로 사용하면 SVG 아이콘을 순식간에 쉽게 사용자 지정할 수 있습니다. 그것이 내가 원하는 것입니다.