Comment puis-je charger SVGs directement dans mon Réagir composant à l'aide de webpack?

Je tiens à rendre un matériau icône du design directement dans mon NextButton composant à l'aide de webpack. Voici la partie de mon code:

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

Mais cela ne fonctionne pas comme je l'aurais cru. Il semble à la sortie de la svg comme une chaîne de caractères, plutôt que d'un élément.

J'ai essayé d'utiliser raw-loader, img-loader, url-loader, file-loader et svg-loader mais je ne trouve pas la bonne façon de le faire.

OriginalL'auteur dduupp | 2015-06-15

  1. 16

    Depuis votre contenu SVG est stocké sous forme de chaîne et de ne pas Réagir comme un élément, vous aurez besoin d'utiliser Dangereusement Ensemble 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>
    )
  }
});

    Vous pourriez peut-être travailler votre chemin autour de cela en créant un webpack chargeur qui fait automatiquement pour vous lorsque vous aurez besoin d'un fichier 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/,
  },
],

    L'extrait de code précédent deviendrait alors:

    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>
    )
  }
});
    Qui m'a beaucoup aidé, merci!
    Note rapide - il faut __html pas _html
    Merci, j'ai corrigé.

    OriginalL'auteur Alexandre Kirszenberg