React で SVG をエレガントに使用する方法

React で svg を使用するエレガントな方法: 最初に [svg-sprite-loader] をインストールして [/config/webpack.config.js] を設定し、次に src フォルダーの下に新しいアイコン フォルダーを作成し、最後に設定しますSvgIcon コンポーネントを開きます。

このチュートリアルの動作環境: Windows7 システム、React17 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

関連する学習の推奨事項: react ビデオ チュートリアル

react で svg を使用するエレガントな方法:

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

yarn  add svg-sprite-loader --dev

または

npm i svg-sprite-loader -D

2. configure/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 &#39;base64&#39;; 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 フォルダーを作成します#icons フォルダーの下に新しい svg フォルダーを作成し、svg ファイルを配置します

directory

index.js svg フォルダー内のすべての svg ファイルを読み込みます

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

次に、反応エントリ ファイル src/ に src/icons をインポートしてください。 Index.js /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 ディレクトリに配置します。使用するときは、iconClass # に svg 名を指定するだけです。 ##

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;

関連する学習の推奨事項:

JavaScript ビデオ チュートリアル##

以上がReact で SVG をエレガントに使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。