我想NextButton使用 webpack直接在我的组件中渲染一个材料设计图标。这是我的代码的相关部分：
var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg');
var NextButton = React.createClass({
render: function() {
return (
<Link to={this.props.target} className='button--next'>
{this.props.label} {NextIcon}
</Link>
)
}
});
但这并不像我想象的那样工作。它似乎将 svg 输出为字符串，而不是元素。
我已经尝试使用raw-loader，img-loader，url-loader，file-loader和svg-loader，但我不能找到正确的方式来做到这一点。
由于您的 SVG 内容存储为字符串而不是 React 元素，因此您需要使用Dangerously Set innerHTML。
var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg');
var NextButton = React.createClass({
render: function() {
return (
<Link to={this.props.target} className='button--next'>
{this.props.label} <span dangerouslySetInnerHTML={{ __html: NextIcon }} />
</Link>
)
}
});
你或许可以通过创建一个 webpack 加载器来解决这个问题，只要你需要一个 SVG 文件，它就会自动为你做这件事。
危险地SetInnerHTML.loader.js
module.exports = function(content) {
return (
'module.exports = require("react").createElement("span", {' +
'dangerouslySetInnerHTML: {' +
'__html: ' + JSON.stringify(content) +
'}' +
'});'
);
};
webpack.config.js
loaders: [
{
test: /\.svg$/,
loader: require.resolve('./dangerouslySetInnerHTML.loader'),
exclude: /node_modules/,
},
],
之前的代码片段将变为：
var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg');
var NextButton = React.createClass({
render: function() {
return (
<Link to={this.props.target} className='button--next'>
{this.props.label} {NextIcon}
</Link>
)
}
});