Как загрузить SVG прямо в мой компонент React с помощью webpack?

Я хотел бы сделать значок дизайна материала непосредственно в моем компоненте NextButton с помощью webpack. Вот соответствующая часть моего кода:

Но это не работает, как я думал. Кажется, он выводит svg как строку, а не элемент.

Я пробовал использовать raw-loader, img-loader, url-loader, file-loader и svg-loader, но я не могу найти правильный способ сделать это.

Ответы

Ответ 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>
    )
  }
});