react中怎么优雅的使用svg
这篇文章主要介绍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 --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使用的名称对应 } },
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 ( ); }; 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; }; export default Demo;
以上是“react中怎么优雅的使用svg”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享文章:react中怎么优雅的使用svg
网址分享:http://myzitong.com/article/pdspjj.html