Jak załadować pliki SVG bezpośrednio w moim komponencie React za pomocą pakietu internetowego?

Question

Chciałbym renderować ikonę projektowania materiałów bezpośrednio w moim komponencie NextButton przy użyciu pakietu internetowego. Oto odpowiednia część mojego kodu:

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

Ale to nie działa tak jak myślałem. Wydaje się, że wypisuje svg jako ciąg, a nie element.

Próbowałem za pomocą raw-loader, img-loader, url-loader, file-loader i svg-loader ale nie mogę znaleźć właściwą drogę, aby to zrobić.

Answer 1

Ponieważ treść SVG jest zapisana jako ciąg, a nie jako element React, należy użyć 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> 
    ) 
    } 
}); 

Być może można sobie z tym poradzić, tworząc ładowarkę sieciową, która automatycznie zrobi to za każdym razem, gdy będzie potrzebny plik 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/, 
    }, 
], 

Kod poprzedni fragment by następnie stać:

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