如何使用webpack设置内联svg

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

class Header extends Component {

  render() {
    return (
        

          
        
    );
  }
};

export default Header

---

Twitter发布了一个很好的案例研究，显示了为什么您不应该*使用* dangerouslySetInnerHTML来显示SVG：https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive -web-apps-scale-d28a00e780a3＃3732

2> jsaddwater..：

---

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

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

webpack.config.js:

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

在我看来导入:

import closeIcon from 'svg/ic_close_black_24px.svg'; 

模板(Mustache使用3个括号来插入未编码的SVG数据(URL)):

  {{{closeIcon}}}

这样就会插入SVG数据而不是括号,如下所示:

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

3> 小智..：

---

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

该反应-SVG-装载机的WebPack装载程序允许用户导入SVG图标,如JSX组件:

import Logo from './logo.svg';

class App extends Component {
  render() {
    return (
      

          
      
    );
  }
}

最小配置如下所示:

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

最好的部分是它只输出svg文件内容,而不需要任何额外的包装器和dangerouslySetInnerHTML代码.

4> Michelle Til..：

---

如果我没有弄错,因为你正在使用文件加载器,你可以像其他任何需要一样使用它.Webpack将变成require("./logo.svg")文件的路径,它在捆绑时会发出.

import React, { Component } from 'react'

import mySvg from './logo.svg'

class Header extends Component {

  render() {
    return (
        

            
        
    );
  }
};

export default Header

---

它对我不起作用:(你可以发布你的webpack.config.js吗？也许我可以在那里发现我的错误.

5> Dmitry..：

---

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

安装SVG内联加载器

在webpack.config.js中添加 { test: /\.svg$/, loader: 'svg-inline-loader' }

在您的js文件中，导入svg图片，并将其添加到DOM元素中，如下所示

  import Svg from './svg.svg';

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

    element.innerHTML = Svg;

    return element;
  }

  document.body.appendChild(component());

---

不依靠反应并呈现香草ECMAScript的荣誉

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}
      ]
    }
  }
}

用法