Как настроить встроенный svg с webpack

Question

Мне интересно, как настроить встроенный svg с webpack?

Я следую за react-webpack-cookbook.

У меня есть webpack.config настроен правильно с файла загрузчика.

Однако пример показывает использование фонового изображения, как это:

.icon { 
    background-image: url(./logo.svg); 
} 

, который прекрасно работает, но я хочу, чтобы иметь встроенный SVG образ, как я делаю это, чтобы включить мой logo.svg встроенный в мой реактивный компонент?

import React, { Component } from 'react' 

class Header extends Component { 

    render() { 
    return (
     <div className='header'> 
      <img src={'./logo.svg'} /> 
     </div> 
    ); 
    } 
}; 

export default Header 

Answer 1

Если я не ошибаюсь, так как вы используете файл загрузчика, вы можете использовать его во многом таким же образом, как и любые другие требуют. Webpack превратит require("./logo.svg") в путь к файлу, который он испустит, когда он упадет.

import React, { Component } from 'react' 

import mySvg from './logo.svg' 

class Header extends Component { 

    render() { 
    return (
     <div className='header'> 
      <img src={mySvg} /> 
     </div> 
    ); 
    } 
}; 

export default Header 

Answer 2

На самом деле ответ Мишель указал мне в правильном направлении, и что хорошо работает для загрузки файла СВГ с WebPack и использовать его в качестве <img> ЦСИ

Однако на самом деле получить встроенный SVG, мне нужно выполните следующие действия:

Вместо файла загрузчика использования svg-inline-loader в качестве вашего загрузчика: SVG

{ test: /\.svg$/, loader: 'svg-inline-loader' }

Затем, чтобы загрузить SVG встроенный в компоненте:

import React, { Component } from 'react' 
import logo from "./logo.svg"; 

class Header extends Component { 

    render() { 
    return (
     <div className='header'> 
      <span dangerouslySetInnerHTML={{__html: logo}} /> 
     </div> 
    ); 
    } 
}; 

export default Header 

Похоже, есть встроенный SVG обертка для реакции svg-inline-react который был бы другой вариант вместо <div dangerouslySetInnerHTML={{__html: mySvg}} />

Answer 3

Старый вопрос, но я Бесполезный Я не вижу этого решения нигде, поэтому решил опубликовать его, надеясь, что это поможет кому-то.

Если вы хотите, чтобы иметь возможность стилизовать эти иконки SVG, вы можете загрузить их с сырым загрузчиком:

webpack.config.js:

{ 
     test: /\.svg$/, 
     loader: 'raw-loader' 
} 

Ввоз на мой взгляд:

import closeIcon from 'svg/ic_close_black_24px.svg'; 

шаблон (усов использует 3 скобки для вставки данных SVG (URL) незакодированной):

<button id="closeModal"> 
    {{{closeIcon}}} 
</button> 

таким образом данные SVG будут вставлены вместо скобок и выглядеть следующим образом:

<button id="closeModal"> 
    <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path> 
    <path d="M0 0h24v24H0z" fill="none"></path> 
    </svg> 
</button> 

Я использую Backbone с шаблонизатор Усы с Webpack 2.5.1