Comment utiliser SVG avec élégance en réaction

La manière élégante d'utiliser svg dans React : installez d'abord [svg-sprite-loader] et configurez [/config/webpack.config.js] puis créez un nouveau dossier d'icônes sous le dossier src. Enfin défini ; le composant SvgIcon.

L'environnement d'exploitation de ce tutoriel : système windows7, version React17 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandations d'apprentissage associées : Tutoriel vidéo React

La façon élégante d'utiliser SVG dans React :

1. Installez svg-sprite-loader

yarn  add svg-sprite-loader --dev

ou

npm i svg-sprite-loader -D

2. Configurez /config/webpack.config.js (configuration après éjection du fil)

Remarque : le chargeur nouvellement ajouté doit être placé avant le chargeur de fichiers

Raison : le chargeur de webpack est exécuté de l'arrière vers l'avant

Ajouter un chargeur Configurer comme suit

         {
              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. Créez un nouveau dossier d'icônes sous le dossier src

Créez un nouveau dossier svg sous le dossier d'icônes et placez le fichier svg dans le

répertoire

index.js charge les fichiers svg dans tous les dossiers svg

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

Assurez-vous ensuite d'importer src/icons dans le fichier d'entrée de réaction src /index.js /index.js

Le code est le suivant

import "./icons";

4 Composant SvgIcon

Créez un dossier SvgIcon sous le src/. dossier composants et ajoutez le fichier index.jsx

Répertoire

le contenu du composant index.jsx est le suivant :

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. Utilisez

pour mettre le fichier svg que vous souhaitez utiliser dans le répertoire src/icons/svg Lorsque vous l'utilisez, donnez le nom 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;

Recommandations d'apprentissage associées : tutoriel vidéo javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!