SVGアイコンを使用する正しい方法

10885 ワード

おい、人々!私は、あなたが反応でSVGを使う方法に関する多くの話題を読んだと思います.
最も人気のあるアプローチは@svgr/webpack SVGをインポートするにはReactComponent . を使用してプロジェクトを作成する場合
create-react-app あなたは既にこのパッケージを使います.
通常、あなたはこの方法でそれを行うのですか?

import React from 'react';
import { ReactComponent as Icon } from 'path/to/icon.svg';
function Icon() {
    return <Icon />;
}

それは完全に動作しますが、あなたのアイコンをレンダリングする再利用可能なコンポーネントを作成する場合.
例えば、デザイナーはあなたに50 + SVGアイコンのセットを提供します.
多くのチュートリアルは、各アイコンのコンポーネントを作成することをお勧め-それは簡単ですが、面倒な方法です.それは多くのボイラープレートコードを生成することは言うまでもない.😖
あなたが役に立たないboilerメッキを避ける方法を好奇心があるならば、-私のポストへようこそ.

I’ll present you a **simple, but **effective* way to manage SVG icons in your React App.*

TLドクター

あなたが答えを得るにはあまりにせっかちであるならば、それは大丈夫です.
このエレガントなソリューションを使用して起動する必要があるすべてのコードの断片は、以下で提供されます.

import React, { useEffect, useState } from "react";

function Icon(props) {
  const { name, ...otherProps } = props;

  /* Use state hook to store icon module value */
  const [iconModule, setIconModule] = useState(null);

  useEffect(() => {
    /* Use dynamic import to get corresponding icon as a module */
    import(`./icons/${name}.svg`)
      .then((module) => {
        /* Persist data in state */
        setIconModule(module);
      })
      .catch((error) => {
        /* Do not forget to handle errors */
        console.error(`Icon with name: ${name} not found!`);
      });
  }, [ name /* update on name change */ ]);

  const renderIcon = () => {
    if (!iconModule) return null;

    /* Equal to: import { ReactComponent as Icon } from "./path/to/icon.svg" */
    const Component = iconModule.ReactComponent;

    return <Component {...otherProps} />;
  };

  return <>{renderIcon()}</>;
}
export default Icon;

または、あなたはそれで遊ぶことができますcodesandbox.io/s/how-to-use-svg-icon-sets-in-react :

動作方法

一緒にこのアプローチに飛び込んで、それを通して線を通りましょう.
それは見るより簡単です.
まず、必要な機能を持つ新しい機能部品を作成しますname プロップ

function Icon({ name, ...otherProps }) {
    // implementation
}

次に、私たちはuseState アイコンのコンポーネントの値を格納するフックnull 初期値として:

const [iconModule, setIconModule] = useState(null);

それは魔法が起こるところです✨…
動的表現を使用するimport に応じてアイコンを取得するname . import リターンPromise 成功した場合はモジュールを解決し、もしアイコンが見つからなかった場合ERRORを拒否します.
ここでは、Webpackのバンドルで動作します.import( ./アイコン/${ name }.SVG) あらゆる原因.svg ファイル名./icons 新しいチャンクにバンドルされるディレクトリ.実行時に変数名が計算されたとき、star.svg が利用可能になります.これについてもっと読むことができますhere .

import(`./icons/${name}.svg`).then((module) => {
    /* Persist data in state */
    setIconModule(module);
}).catch((error) => {
    /* Do not forget to handle errors */
    console.error(`Icon with name: ${name} not found!`);
});

最後に、うまくインポートされた場合はアイコンのコンポーネントをレンダリングする必要があります.Webpackアプリケーション@svgr/webpack ローダー
動的インポートについて:import( ./アイコン/${ name }.SVG)同じように
静的import Icon from “./path/to/icon.svg”

const renderIcon = () => {
    if (!iconModule) return null;
    /**
    * Equal to:
    * import { ReactComponent as Icon } from "./path/to/icon.svg";
    */
    const Component = iconModule.ReactComponent;
    return <Component {...otherProps} />;
};