Cómo usar los componentes svg con gracia en proyectos react (create-react-app)

Cómo usar svg con gracia en proyectos de reacción

dirección de demostración de github

Antecedentes: en el pasado, svg-sprite-loader se usaba para procesar archivos svg en el proyecto vue. Era muy conveniente de usar. Simplemente cargue el archivo svg, configure y defina los componentes globales. Recientemente, estaba escribiendo un proyecto react, siguiendo el mismo método, trayendo la idea de usar svg en vue a En react, se logra el mismo efecto siempre que el archivo svg se coloque en la carpeta especificada y se pueda usar el nombre del archivo combinado con el componente react.

Entorno del proyecto: create-react-app: 3.0.0 react: 16.8.6 react-router-dom: 5.0.0
directorio del proyecto

Los pasos de uso son los siguientes:

1. Instale svg-sprite-loader

yarn  add svg-sprite-loader --dev

o

npm i svg-sprite-loader -D

2. Configure /config/webpack.config.js (configuración después de la expulsión del hilo)

Nota: El cargador recién agregado debe colocarse antes que el cargador de archivos

Razón: la ejecución del cargador de webpack se ejecuta de atrás hacia adelante

Agregue la siguiente configuración en el cargador

         {
    
    
              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. Cree una nueva carpeta de iconos en la carpeta src.

Cree una nueva carpeta svg debajo de la carpeta de iconos para colocar archivos svg

El directorio

index.js carga todos los archivos svg en la carpeta svg

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

Luego, asegúrese de importar src / icons / index.js en el archivo de entrada de reacción src / index.js

el código se muestra a continuación

import "./icons";

4. Componente SvgIcon

Cree una carpeta SvgIcon en la carpeta src / components y agregue el
directorio de archivos index.jsx

El contenido del componente index.jsx es el siguiente:

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;

estilo sin

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

5. Use
Poner el archivo svg que se usará en el directorio src / icons / svg y dé el nombre svg a iconClass cuando lo use

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;