svg-to-react 教程

将 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 的一个简单教程，更多使用方法请参考官方文档。

： » svg-to-react 教程