Làm cách nào để tải trực tiếp SVG vào thành phần React của tôi bằng cách sử dụng webpack?

Question

Tôi muốn hiển thị biểu tượng thiết kế material design trực tiếp trong thành phần NextButton của mình bằng cách sử dụng gói webpack. Đây là phần có liên quan của mã của tôi:

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

Nhưng điều này không hoạt động như tôi nghĩ. Có vẻ như xuất ra svg như một chuỗi, chứ không phải là một phần tử.

Tôi đã thử sử dụng raw-loader, img-loader, url-loader, file-loader và svg-loader nhưng tôi không thể tìm được cách chính xác để thực hiện việc này.

Answer 1

Vì nội dung SVG của bạn được lưu trữ dưới dạng chuỗi chứ không phải là phần tử React, bạn sẽ cần sử dụng 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> 
    ) 
    } 
}); 

Bạn có thể làm việc theo cách này bằng cách tạo trình tải gói web tự động thực hiện việc này cho bạn bất cứ khi nào bạn yêu cầu tệp 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/, 
    }, 
], 

Đoạn mã trước sau đó sẽ trở thành:

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