Rumah >hujung hadapan web >tutorial js >react中如何优雅的使用svg
react中优雅的使用svg的方法:首先安装【svg-sprite-loader】,并配置【/config/webpack.config.js】;然后在src文件夹下新建一个icons文件夹;最后设置SvgIcon组件。
本教程操作环境:windows7系统、React17版,该方法适用于所有品牌电脑。
相关学习推荐:react视频教程
react中优雅的使用svg的方法:
1、安装 svg-sprite-loader
yarn add svg-sprite-loader --dev
or
npm i svg-sprite-loader -D
2、配置 /config/webpack.config.js (yarn eject 后的配置 )
注意:新添加的loader一定要放到file-loader之前
原因:webpack的loader执行是从后往前执行的
loader 里添加如下配置
{ 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 文件夹
icons 文件夹下新建 svg 文件夹放 svg 文件
目录
index.js 加载所有 svg 文件夹下 svg 文件
const requireAll = requireContext => requireContext.keys().map(requireContext); const svgs = require.context("./svg", false, /\.svg$/); requireAll(svgs);
然后一定要在react入口文件 src/index.js中导入src/icons/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;
相关学习推荐:javascript视频教程
Atas ialah kandungan terperinci react中如何优雅的使用svg. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!