Javascript 如何使用 webpack 设置内联 svg
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34257800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set up an inline svg with webpack
提问by svnm
I am wondering how to set up an inline svg with webpack?
我想知道如何使用 webpack 设置内联 svg？
I am following the react-webpack-cookbook.
我正在关注react-webpack-cookbook。
I have my webpack.configset up correctly with the file loader.
我使用文件加载器正确设置了我的webpack.config。
However the example shows using a background image like this:
但是，示例显示使用这样的背景图像：
.icon {
background-image: url(./logo.svg);
}
which works fine, but I want to have an inline svg image how do I do this to include my logo.svginline in my react component?
哪个工作正常，但我想要一个内联 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
回答by svnm
Actually Michelle's answer pointed me in the right direction, and that works nicely for loading an svg file with webpack and using it as your <img>src
实际上，Michelle 的回答为我指明了正确的方向，这非常适合使用 webpack 加载 svg 文件并将其用作您的<img>src
However to actually get the inline svg, I needed to do the following:
但是，要实际获得内联 svg，我需要执行以下操作：
Instead of file-loader use svg-inline-loaderas your svg loader:
使用svg-inline-loader作为 svg 加载器而不是文件加载器：
{ test: /\.svg$/, loader: 'svg-inline-loader' }
{ test: /\.svg$/, loader: 'svg-inline-loader' }
Then to load the svg inline in a component:
然后在组件中加载 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
It looks like there is an inline svg wrapper for react svg-inline-reactwhich would be another option instead of the <div dangerouslySetInnerHTML={{__html: mySvg}} />
看起来有一个用于 react svg-inline-react的内联 svg 包装器，这将是另一种选择，而不是<div dangerouslySetInnerHTML={{__html: mySvg}} />
回答by Stas Gavrylov
I hope my late answer will still be useful for someone, because I don't like any of abovementioned options.
我希望我迟到的答案仍然对某人有用，因为我不喜欢上述任何选项。
The react-svg-loaderwebpack loader allows you to import SVG icons like JSX components:
该反应-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>
);
}
}
and minimum config looks like this:
和最低配置如下所示：
{
test: /\.svg$/,
use: [
{
loader: "babel-loader"
},
{
loader: "react-svg-loader",
options: {
jsx: true // true outputs JSX tags
}
}
]
}
The best part is that it just outputs the svg file contents, without any extra wrappers and dangerouslySetInnerHTMLin your code.
最好的部分是它只输出 svg 文件内容，没有任何额外的包装器和dangerouslySetInnerHTML代码。
回答by jsaddwater
Old question, but I didn't see this solution anywhere so I decided to post it, hoping it will help someone.
老问题，但我在任何地方都没有看到这个解决方案，所以我决定发布它，希望它能帮助别人。
If you want to be able to style those SVG icons, you might want to load them with the raw loader:
如果您希望能够设置这些 SVG 图标的样式，您可能需要使用原始加载器加载它们：
webpack.config.js:
webpack.config.js：
{
test: /\.svg$/,
loader: 'raw-loader'
}
The import in my view:
我认为的进口：
import closeIcon from 'svg/ic_close_black_24px.svg';
The template (Mustache uses 3 brackets to insert the SVG data (URL)unencoded):
模板（Mustache 使用 3 个括号插入未编码的 SVG 数据（URL））：
<button id="closeModal">
{{{closeIcon}}}
</button>
this way the SVG data will be inserted instead of the brackets and look like this:
这样 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>
I'm using Backbone with Mustache template engine with Webpack 2.5.1
我在 Webpack 2.5.1 中使用 Backbone with Mustache 模板引擎
回答by Dmitry
Here is a simple non-react solution.
这是一个简单的非反应解决方案。
- Install Svg inline loader
- In webpack.config.js add
{ test: /\.svg$/, loader: 'svg-inline-loader' } - In your js file import svg image and add it to a DOM element like so
- 安装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());
回答by Michelle Tilley
If I'm not mistaken, since you're using the file loader, you can utilize it in much the same way as any other require. Webpack will turn require("./logo.svg")into a path to a file, which it will emit when it bundles.
如果我没记错的话，因为您使用的是文件加载器，所以您可以像使用任何其他 require 一样使用它。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
回答by Brian Henze
Similar to another answer using React, there is also a handy Vue plugin as well.
与使用 React 的另一个答案类似，还有一个方便的 Vue 插件。
vue-svg-loaderjust throw it in your configuration and start using. The nice thing is it will also run your svg through SVGO to optimize it.
vue-svg-loader只需将其放入您的配置中并开始使用。好消息是它还可以通过 SVGO 运行您的 svg 以对其进行优化。
Configuration
配置
{
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}
]
}
}
}
Usage
用法
<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>
回答by Stevethemacguy
Angular Solution (2019): Use svg-sprite-loaderto combine SVGs into a single sprite that's lazy-loaded with your Webpack bundles.
Angular 解决方案（2019 年）：使用svg-sprite-loader将SVG组合成一个单独的精灵，该精灵与您的 Webpack 包延迟加载。
Webpack
网络包
{
test: /\.svg$/,
use: [
'svg-sprite-loader',
'svgo-loader' // Optimize SVGs (optional)
]
}
HTML
HTML
<svg>
<use xlink:href="#arrow"/>
</svg>
Angular Component
角度组件
export * from 'assets/images/icons/arrow.svg';
I use export (instead of import) to prevent the AOT compiler from removing the import during tree-shaking, while allowing for minimal code in the component, but you can use importif you prefer.
我使用导出（而不是导入）来防止 AOT 编译器在摇树过程中删除导入，同时允许组件中的代码最少，但如果您愿意，可以使用导入。
To use export in this way, you must configure the compiler to expect side effects from SVG files in package.json (i.e. you can not use "sideEffects": false). See the Webpack Tree Shaking Guide
要以这种方式使用导出，您必须将编译器配置为预期 package.json 中 SVG 文件的副作用（即您不能使用 "sideEffects": false）。参见Webpack Tree Shaking 指南
"sideEffects": [
"*.svg",
],
回答by Domysee
@svgr/webpack(npm) is the inline svg loader that create-react-appuses.
@svgr/webpack( npm) 是create-react-app使用的内联 svg 加载器。
Add the rule to your webpack config:
将规则添加到您的 webpack 配置中：
{
test: /\.svg$/,
use: ['@svgr/webpack'],
}
Then you can import svgs as React components:
然后你可以将 svgs 作为 React 组件导入：
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)
