SVG를 React로 읽고 데이터:포함

비록 낮은 시세가 여러 개 있지만, 이것은 매우 솔직하다.

npm i svg-url-loader -D

에서 Webpack이 설정되었습니다.

const path = require('path');

module.exports = {
    entry: {
        console: './src/console/index.js'
    },
    output: {
        filename: './static/dist/[name]/a.js'
    },
    module: {
        rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env','es2015', 'react']
                }
            }
        },
        {
            test: /\.svg$/,
            use: {
                loader: 'svg-url-loader',
                options: {
                    noquotes: true
                }
            }
        }
        ]
    }
}

※ 상술한 것은 이 기술만이 아닙니다."test:/.svg/"의 대상은 상응하는 곳에 있습니다.
요점은 옵션noquotes에서 true로 제공되는 것입니다.
처음엔 아무것도 안 끼고 같은 따옴표를 달았어요.
SVG 읽기에는 특별한 요구 사항이 없습니다.

import Logo from '../assets/svg/logo.svg';

이렇게 import하면 돼요.
'React v15.0'에서 SVG를 봤다고 쓰여있는 클라우드가 지원되고 있어요.
Webpack 설정이 잘못됐는지 컴파일링이 통과되지 않아서 보지 않겠습니다.