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

【问题标题】：How do I load SVGs directly in my React component using webpack?如何使用 webpack 在我的 React 组件中直接加载 SVG？
【发布时间】：2015-06-15 11:42:08
【问题描述】：

我想使用 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，但我找不到正确的方法。

【问题讨论】：

标签： svg icons reactjs loader webpack

【解决方案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/,
  },
],

之前的代码 sn-p 会变成：

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>
    )
  }
});

【讨论】：

快速说明 - 应该是 __html 而不是 _html
谢谢，我修好了。