使用 ES6 语法在 NPM 模块中制作 SVG React Material-UI 图标

Question

我在我的Meteor/React/Material UI应用程序中创建了一个自定义SVG图标。图标的代码类似于

import React from 'react';
import SvgIcon from 'material-ui/SvgIcon';
let LoadBalancerIcon = (props) => (
<SvgIcon {...props}>
<circle cx="50" cy="48.75" r="30.43" fill="#f58536"/>
<path fill="#fff" d="M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z"/>
<path fill="#fff" d="M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09" />
</SvgIcon>
);
LoadBalancerIcon.displayName = 'LoadBalancerIcon';
LoadBalancerIcon.muiName = 'SvgIcon';
export default LoadBalancerIcon;

这很好用，所以我想我会为这些图标创建一个 NPM 模块，以便其他人可以使用它。我用类似代码创建了模块

'use strict';
var React = require('react');
var  SvgIcon  = require('material-ui/SvgIcon');
class LoadBalancerIcon extends React.Component {
constructor() {
super();
}
render() {
return (
<SvgIcon >
<circle cx="50" cy="48.75" r="30.43" fill="#f58536"/>
<path fill="#fff" d="M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z"/>
<path fill="#fff" d="M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09" />
</SvgIcon>
);
}
}
LoadBalancerIcon.displayName = 'LoadBalancerIcon';
LoadBalancerIcon.muiName = 'SvgIcon';
module.exports = LoadBalancerIcon;

但是当我在应用程序中使用它时，我收到此错误

"元素类型无效：需要字符串(对于内置组件) 或类/函数(用于复合组件)，但得到：对象。

我正在使用 Babel 来转译文件，我可以看到转译的文件是这样的：

'use strict';
var React = require('react');
var SvgIcon = require('material-ui/SvgIcon');
class LoadBalancerIcon extends React.Component {
constructor() {
super();
}
render() {
return React.createElement(
SvgIcon,
null,
React.createElement('circle', { cx: '50', cy: '48.75', r: '30.43', fill: '#f58536' }),
React.createElement('path', { fill: '#fff', d: 'M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z' }),
React.createElement('path', { fill: '#fff', d: 'M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09' })
);
}
}
LoadBalancerIcon.displayName = 'LoadBalancerIcon';
LoadBalancerIcon.muiName = 'SvgIcon';
module.exports = LoadBalancerIcon;

如果我不是在 ES6 中写入文件，例如：

'use strict';
var React = require('react');
var mui = require('material-ui');
var SvgIcon = mui.SvgIcon;
var LoadBalancerIcon = React.createClass({
displayName: 'LoadBalancerIcon',
render: function render() {
return React.createElement(
SvgIcon,
this.props,
[
React.createElement('circle', { cx: '50', cy: '48.75', r: '30.43', fill: '#f58536' }),
React.createElement('path', { d: 'M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z', fill: '#fff' }),
React.createElement('path', { d: 'M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09', fill: '#fff' })
]
);
}
});
module.exports = LoadBalanceIcon;

它工作正常，但我宁愿用 ES6 编写它。可能是什么问题？

Answer 1

我发现了问题。在有效的(非 ES6)代码中，我有

var SvgIcon = mui.SvgIcon;

对

var  SvgIcon  = require('material-ui/SvgIcon');

更改它解决了问题。更改需要导入，完整示例如下所示

import React, { Component } from 'react';
import mui, {SvgIcon} from 'material-ui';
export default class LoadBalancerIcon extends Component {
constructor() {
super();
}
render() {
return (
<SvgIcon {...this.props} >
<circle cx="50" cy="48.75" r="30.43" fill="#f58536"/>
<path fill="#fff" d="M24.42 39.87h11.05v17.76H24.42zM59.73 27.74h9.86v9.86h-9.86zM59.73 43.82h9.86v9.86h-9.86zM59.73 59.91h9.86v9.86h-9.86z"/>
<path fill="#fff" d="M57.01 50.05l1.64-.81 1.08-.53-1.08-.54-1.46-.72-4.4-2.17v2.17H39.58l15.01-9.61 1.19 1.84 2.49-4.2.73-1.24.73-1.22-1.4.17-1.59.18-4.7.55 1.13 1.74-18.41 11.79-2.03 1.3 2.42 1.54 18.02 11.55-1.13 1.74 4.7.55 1.59.18 1.4.17-.73-1.22-.73-1.24-2.49-4.2-1.19 1.84-15.01-9.61h13.21v2.09l4.22-2.09" />
</SvgIcon>
);
}
}
LoadBalancerIcon.displayName = 'LoadBalancerIcon';
LoadBalancerIcon.muiName = 'LoadBalancerIcon';