Question

我想使用webpack直接在我的NextButton组件中呈现材质设计图标。这是我的代码的相关部分：

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，但我无法找到正确的方法这样做。

Answer 1

由于您的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文件，它都会自动为您执行此操作。

<强> dangerouslySetInnerHTML.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>
    )
  }
});

如何使用webpack直接在我的React组件中加载SVG？

1 个答案: