How to use svg elegantly in react

The elegant way to use svg in react: first install [svg-sprite-loader] and configure [/config/webpack.config.js]; then create a new icons folder under the src folder; Finally set up the SvgIcon component.

The operating environment of this tutorial: windows7 system, React17 version. This method is suitable for all brands of computers.

Related learning recommendations:react video tutorial

The elegant way to use svg in react:

1. Install svg-sprite-loader

yarn add svg-sprite-loader --dev

or

npm i svg-sprite-loader -D

2. Configure/config/webpack.config.js (configuration after yarn eject)

Note: The newly added loader must be placed before the file-loader

Reason: The loader of webpack is executed from back to front

Added in loader Configure as follows

{ 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使用的名称对应  } },

3. Create a new icons folder under the src folder

Create a new svg folder under the icons folder and place the svg file

directory

index.js Load all svg files in the svg folder

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

Then be sure to import src/icons in the react entry file src/index.js /index.js

The code is as follows

import "./icons";

4. SvgIcon component

Create a SvgIcon folder under the src/components folder and add index.jsx File

Directory

index.jsx component content is as follows:

import React from "react"; import PropTypes from "prop-types"; import styles from "./style.less"; //已启用 CSS Modules const SvgIcon = props => { const { iconClass, fill } = props; return (    ); }; 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. Use

to put the svg file you want to use in the src/icons/svg directory. When using it, just give the svg name to iconClass

import React from "react"; import SvgIcon from "@/components/SvgIcon"; const Demo = () => { const svgName="content" // content.svg 已经放到 /src/icons/svg/ 目录下 return ; }; export default Demo;

Related learning recommendations:javascript video tutorial

##

The above is the detailed content of How to use svg elegantly in react. For more information, please follow other related articles on the PHP Chinese website!