如何使用webpack设置内联svg

Question

我想知道如何使用webpack设置内联svg？

我正在关注react-webpack-cookbook.

我使用文件加载器正确设置了webpack.config.

但是,该示例显示使用如下背景图像:

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

哪个工作正常,但我想有一个内联svg图像我该怎么做才能在我的react组件中包含我的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

实际上,Michelle的回答指出了我正确的方向,并且适用于使用webpack加载svg文件并将其用作<img>src

但是为了实际获得内联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-inline-react的内联svg包装器,这将是另一种选择,而不是<div dangerouslySetInnerHTML={{__html: mySvg}} />

Answer 2

老问题,但我没有在任何地方看到这个解决方案所以我决定发布它,希望它能帮助某人.

如果您希望能够设置这些SVG图标的样式,您可能希望使用原始加载器加载它们:

webpack.config.js:

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

在我看来导入:

import closeIcon from 'svg/ic_close_black_24px.svg'; 

模板(Mustache使用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>

我正在使用带有Webpack 2.5.1的Backbone和Mustache模板引擎

Answer 3

我希望我的迟到答案仍然对某人有用,因为我不喜欢任何上述选项.

该反应-SVG-装载机的WebPack装载程序允许用户导入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代码.

Answer 4

如果我没有弄错,因为你正在使用文件加载器,你可以像其他任何需要一样使用它.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 5

这是一个简单的非反应性解决方案。

1. 安装SVG内联加载器
2. 在webpack.config.js中添加 { test: /\.svg$/, loader: 'svg-inline-loader' }
3. 在您的js文件中，导入svg图片，并将其添加到DOM元素中，如下所示

  import Svg from './svg.svg';

  function component() {
    const element = document.createElement('div');

    element.innerHTML = Svg;

    return element;
  }

  document.body.appendChild(component());

Answer 6

类似于使用React的另一个答案，也有一个方便的Vue插件。

vue-svg-loader只是将其放入您的配置中并开始使用。令人高兴的是，它还将通过SVGO运行svg进行优化。

组态

{
    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>