Значки SLDS svg не отображаются в Webpack 2

Question

У меня проблема с получением значков SVG из модуля узла SLDS (Salesforce Lightning Design System) для визуализации. Приведенный ниже пример отлично работает в проекте webx 1.x.

В консоли разработчика я вижу 404, когда svg используется use тег отображается. Я пробовал разные типы загрузчиков и имитировал то, что делается со шрифтами (так как они работают нормально), но я не могу заставить Webpack распознавать файлы SVG в модуле узла SLDS и связывать / выдавать их. Я попытался скопировать исходный код для компонента ниже в проект Webpack 1.x, и он работает нормально. Любые предложения будут высоко ценится.

Компонент, Webpack и вывод ниже. Дайте мне знать, если мне нужно что-то еще предоставить.

Компонент приложения:

import React, { PropTypes } from 'react';

import './styles.scss'

export default React.createClass({
    displayName: 'App',

    render() {
        return (
            <div className="slds-page-header">
                <div className="slds-grid">
                    <div className="slds-col slds-has-flexi-truncate">
                        <div className="slds-media slds-no-space slds-grow">
                            <div className="slds-media__figure">
                                <svg className="slds-icon slds-icon-standard-user" aria-hidden="true">
                                    <use xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#user"></use>
                                </svg>
                            </div>
                            <div className="slds-media__body">
                                <p className="slds-text-title--caps slds-line-height--reset">Icons</p>
                                <h1 className="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Won't Load</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

Webpack Config:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var RESOURCES = path.resolve(__dirname, 'src/main/resources');
var ASSETS = path.resolve(RESOURCES, 'assets');
var APP = path.resolve(RESOURCES, 'app');
var DIST = path.resolve(ASSETS, 'dist');

var extractCSS = new ExtractTextPlugin('[name].css');
var extractSCSS = new ExtractTextPlugin('[name].scss');

module.exports = {
    devtool: 'source-map',
    devServer: {
        contentBase: ASSETS,
        compress: true,
        port: 8080
    },
    entry: {
        app: APP + '/index.js'
    },
    resolve: {
        extensions: [ '.js', '.jsx', '.json']
    },
    output: {
        path: DIST,
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                use: 'babel-loader',
                include: [
                    APP
                ]
            },
            { test: /\.json/, loader: ['json-loader'] },
            {
                test: /\.(gif|jpe?g|png)/,
                use: [
                    { loader: 'url-loader' }
                ]
            },
            {
                test: /\.svg/,
                use: { loader: 'url-loader' }
            },
            {
                test: /\.(eot|woff|woff2|ttf)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 30,
                        name: 'assets/fonts/webfonts/[name].[ext]'
                    }
                }
            },
            {
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: {
                        loader: 'css-loader',
                        options: { sourceMap: true }
                    }
                })
            },
            {
                test: /\.scss$/,
                use: extractSCSS.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: { sourceMap: true }
                        },
                        {
                            loader: 'resolve-url-loader'
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                outputStyle:'expanded',
                                sourceMap: true,
                                sourceMapContents: true
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [ extractCSS ]
};

Построить вывод

> webpack

Hash: 413338d67a2515c58948
Version: webpack 2.2.1
Time: 10382ms
                                                 Asset     Size  Chunks                    Chunk Names
      assets/fonts/webfonts/SalesforceSans-Light.woff2  27.7 kB          [emitted]         
        assets/fonts/webfonts/SalesforceSans-Bold.woff    35 kB          [emitted]         
  assets/fonts/webfonts/SalesforceSans-BoldItalic.woff    36 kB          [emitted]         
 assets/fonts/webfonts/SalesforceSans-BoldItalic.woff2  28.5 kB          [emitted]         
      assets/fonts/webfonts/SalesforceSans-Italic.woff    36 kB          [emitted]         
     assets/fonts/webfonts/SalesforceSans-Italic.woff2  28.3 kB          [emitted]         
       assets/fonts/webfonts/SalesforceSans-Light.woff    35 kB          [emitted]         
       assets/fonts/webfonts/SalesforceSans-Bold.woff2  27.6 kB          [emitted]         
 assets/fonts/webfonts/SalesforceSans-LightItalic.woff  36.2 kB          [emitted]         
assets/fonts/webfonts/SalesforceSans-LightItalic.woff2  28.5 kB          [emitted]         
     assets/fonts/webfonts/SalesforceSans-Regular.woff  34.9 kB          [emitted]         
    assets/fonts/webfonts/SalesforceSans-Regular.woff2  27.7 kB          [emitted]         
                                             bundle.js  1.74 MB       0  [emitted]  [big]  app
                                         bundle.js.map   2.1 MB       0  [emitted]         app

Рендеринг вывода

Ожидаемый результат

Answer 1

Убедись в

1. добавить эти атрибуты xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" к <html>

2. отметьте путь к значку и замените все статические пути к ресурсам с помощью синтаксиса Visualforce URLFOR

3. для браузера IE используйте https://github.com/jonathantneal/svg4everybody

4. если вы перерисовываете SVG, используйте <path> тег вместо <use> тег