Есть ли способ импортировать файлы, которые я обслуживаю через express.static? [Дубликат]

Как и в другом ответе, использующем React, есть также удобный плагин Vue.

vue-svg-loader просто бросает его в вашу конфигурацию и начинает использовать. Хорошая вещь - это также запустить ваш SVG через SVGO, чтобы его оптимизировать.

Конфигурация

{
    test: /\.svg$/,
  loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
  options: {
    // optional [svgo](https://github.com/svg/svgo) options
    svgo: {
      plugins: [
        {removeDoctype: true},
        {removeComments: true}
      ]
    }
  }
}

Использование

<template>
  <nav id="menu">
    <a href="...">
      <SomeIcon class="icon" />
      Some page
    </a>
  </nav>
</template>

<script>
import SomeIcon from './assets/some-icon.svg';

export default {
  name: 'menu',
  components: {
    SomeIcon,
  },
};
</script>

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

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

webpack.config.js:

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

Импорт в мое представление:

import closeIcon from 'svg/ic_close_black_24px.svg'; 

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

<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 с движком шаблонов Mustache с Webpack 2.5.1

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

Загрузитель веб-загрузки react-svg-loader позволяет вам для импорта значков SVG, таких как компоненты JSX:

import Logo from './logo.svg';

class App extends Component {
  render() {
    return (
      <div className="App">
          <Logo fill="red" className="logo" width={50} height={50} />
      </div>
    );
  }
}

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

{
  test: /\.svg$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

. Лучшая часть состоит в том, что он просто выводит содержимое файла svg без каких-либо дополнительные обертки и dangerouslySetInnerHTML в вашем коде.

Если я не ошибаюсь, поскольку вы используете загрузчик файлов, вы можете использовать его так же, как и любой другой. 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