本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云
将 SVG 转换为 React 组件除了 SVGR,还有很多其他js插件。比如我们今天要学习的 svg-to-react。本文将介绍 svg-to-react 的相关用法。
和 SVGR 相比 svg-to-react 更简单,当然支持的功能也更少。svg-to-react 目前已经停更了,最新版本还是3年前发布的内容。
svg-to-react基本用法
将SVG转换为React组件。我们通过下面的一个简单的例子来介绍它。
var toReact = require('svg-to-react'); var renderComponent = toReact.convert('<svg xmlns="http://www.w3.org/2000/svg">'+ '<circle stroke-width="2" stroke="#424242"></circle>'+ '</svg>' );
转换为React代码后如下:
var renderComponent = function anonymous(params) { return React.createElement('svg', params, React.createElement('circle', { strokeWidth: '2', stroke: params.color }) ); }
常用方法介绍
var renderFunction = svgToReact.convert(svgString)
使用svgString,通过SVGO运行它,并返回一个使用React组件渲染SVG的函数。该函数接受一个params
允许您自定义SVG以及传递标准的React处理程序和道具的对象。
svgToReact.convertFile(filePath, function(err, renderFunction) {})
filePath在回调中读取SVG并返回渲染函数
svgToReact.convertDir(dirPath, function(err, renderFunctions) {})
递归地读取所有dirPathSVG并返回包含每个SVG文件的所有渲染功能的对象。对象的格式如下:
{ "svgFile": function () {}, "nested/svgFile": function() {} }
每个按键都是一个相对的目录文件的路径,减去的SVG的延伸。以上就是关于 svg-to-react 的一个简单教程,更多使用方法请参考官方文档。
最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!
本文原文出处:业余草: » svg-to-react 教程