react（create-react-app）プロジェクトでsvgコンポーネントを適切に使用する方法

反応プロジェクトでsvgを適切に使用する方法

githubデモアドレス

背景：以前は、svg-sprite-loaderを使用してvueプロジェクトのsvgファイルを処理していました.svgファイルをロードし、グローバルコンポーネントを構成および定義するだけで、非常に便利でした。 reactでは、svgファイルが指定されたフォルダーに配置され、reactコンポーネントと組み合わせたファイル名を使用できる限り、同じ効果が得られます。

プロジェクト環境：create-react-app：3.0.0 react：16.8.6 react-router-dom：5.0.0
プロジェクトディレクトリ

使用手順は次のとおりです。

1.svg-sprite-loaderをインストールします

yarn  add svg-sprite-loader --dev

または

npm i svg-sprite-loader -D

2. /config/webpack.config.jsを構成します（ヤーンイジェクト後の構成）

注：新しく追加されたローダーは、ファイルローダーの前に配置する必要があります

理由：webpackのローダーの実行が後ろから前に実行される

ローダーに次の構成を追加します

         {
    
    
              test: /\.(eot|woff2?|ttf|svg)$/,
              exclude: path.resolve(__dirname, "../src/icons"), //不处理指定svg的文件(所有使用的svg文件放到该文件夹下)
              use: [
                {
    
    
                  loader: "url-loader",
                  options: {
    
    
                    name: "[name]-[hash:5].min.[ext]",
                    limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                    outputPath: "font",
                    publicPath: "font"
                  }
                }
              ]
            },

            {
    
    
              test: /\.svg$/,
              loader: "svg-sprite-loader",
              include: path.resolve(__dirname, "../src/icons"), //只处理指定svg的文件(所有使用的svg文件放到该文件夹下)
              options: {
    
    
                symbolId: "icon-[name]" //symbolId和use使用的名称对应      <use xlinkHref={"#icon-" + iconClass} />

              }
            },

3.srcフォルダーの下に新しいiconsフォルダーを作成します

アイコンフォルダの下に新しいsvgフォルダを作成して、svgファイルを配置します

ディレクトリ

index.jsは、svgフォルダー内のすべてのsvgファイルをロードします

const requireAll = requireContext => requireContext.keys().map(requireContext);
const svgs = require.context("./svg", false, /\.svg$/);
requireAll(svgs);

次に、必ずsrc / icons /index.jsをreactエントリファイルsrc / index.jsにインポートしてください。

コードは以下のように表示されます

import "./icons";

4.SvgIconコンポーネント

src / componentsフォルダーの下にSvgIconフォルダーを作成し、index.jsxファイル
ディレクトリを追加します

index.jsxコンポーネントの内容は次のとおりです。

import React from "react";
import PropTypes from "prop-types";
import styles from "./style.less"; //已启用 CSS Modules

const SvgIcon = props => {
    
    
  const {
    
     iconClass, fill } = props;

  return (
    <i aria-hidden="true" className="anticon">
      <svg className={
    
    styles["svg-class"]}>
        <use xlinkHref={
    
    "#icon-" + iconClass} fill={
    
    fill} />
      </svg>
    </i>
  );
};

SvgIcon.propTypes = {
    
    
  // svg名字
  iconClass: PropTypes.string.isRequired,
  // 填充颜色
  fill: PropTypes.string
};

SvgIcon.defaultProps = {
    
    
  fill: "currentColor"
};

export default SvgIcon;

style.less

.svg-class {
  display: inline-block;
  overflow: hidden;
  font-size: 14px;
  min-width: 14px;
  width: 1em;
  height: 1em;
}

5.使用
するsvgファイルをsrc / icons / svgディレクトリに置き、使用するときはsvg名をiconClassに付けます。

import React from "react";
import SvgIcon from "@/components/SvgIcon";

const Demo = () => {
    
    
    const svgName="content"  // content.svg  已经放到 /src/icons/svg/  目录下

  return <SvgIcon iconClass={
    
    svgName} />;
};

export default Demo;