svg-to-react 教程

HTML5 herman 1112浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » svg-to-react 教程