Como carrego SVGs diretamente no meu componente React usando o webpack?

Question

Jun 15, 2015, 01:42 PM

Como carrego SVGs diretamente no meu componente React usando o webpack?

Gostaria de renderizar um ícone de design de material diretamente no meuNextButton componente usando o webpack. Aqui está a parte relevante do meu código:

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

Mas isso não está funcionando como eu pensava. Parece exibir o svg como uma string, em vez de um elemento.

Eu tentei usarraw-loader, img-loader, url-loader, file-loader esvg-loader mas não consigo encontrar a maneira correta de fazer isso.