Question

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

我使用文件加载器正确设置了 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

实际上，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

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

react-svg-loader webpack加载程序允许您导入类似JSX组件的SVG图标：

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 3

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

与使用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>

Answer 5

Angular解决方案（2019）：使用svg-sprite-loader将SVG组合为一个随同Webpack捆绑包延迟加载的sprite。

Webpack

utility.x

HTML

{
  test: /\.svg$/,
  use: [
    'svg-sprite-loader',
    'svgo-loader' // Optimize SVGs (optional)
  ]
}

角度组件

<svg>
    <use xlink:href="#arrow"/>
</svg>

我使用导出（而不是导入）来防止AOT编译器在摇树时删除导入，同时使组件中的代码最少，但是如果愿意，可以use import。

要以这种方式使用导出，必须将编译器配置为可以从package.json中的SVG文件中获取副作用（即，您不能使用“ sideEffects”：false）。参见Webpack Tree Shaking Guide

export * from 'assets/images/icons/arrow.svg';

Answer 6

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

安装Svg inline loader
在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());

Answer 7

@svgr/webpack（npm）是create-react-app使用的嵌入式svg加载器。

将规则添加到您的webpack配置中：

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

然后您可以将svgs导入为React组件：

import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)

Answer 8

使用svg-inline-loader并遇到“找不到模块”错误的人们尝试安装babel-plugin-inline-react-svg并将其添加到babel插件中：

"plugins": [
    ...
    ["inline-react-svg", {}]
],
...

如何使用webpack设置内联svg

8 个答案: