这篇文章主要介绍react中怎么优雅的使用svg，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
react中优雅的使用svg的方法：首先安装【svg-sprite-loader】，并配置【/config/webpack.config.js】；然后在src文件夹下新建一个icons文件夹；最后设置SvgIcon组件。
react中优雅的使用svg的方法：
1、安装 svg-sprite-loader
计算
安全
数据库
网络和加速
企业服务
yarn add svg-sprite-loader --devor
npm i svg-sprite-loader -D2、配置 /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;以上是“react中怎么优雅的使用svg”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
