我想知道如何使用webpack设置内联SVG？
我正在按照react-webpack-cookbook的指导进行操作。
我的webpack.config已正确设置了文件加载器（file loader）。
然而，示例展示了如何使用背景图片：
.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
这里有一个简单的非React解决方案。
{ test: /\.svg$/, loader: 'svg-inline-loader' } import Svg from './svg.svg';
function component() {
const element = document.createElement('div');
element.innerHTML = Svg;
return element;
}
document.body.appendChild(component());
实际上，Michelle的答案给了我正确的方向，并且在webpack中加载svg文件并将其用作<img>的来源非常有效。
然而，为了实际获取内联svg，我需要执行以下操作：
使用svg-inline-loader替代file-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
看起来有一个用于React的内联SVG封装器 svg-inline-react，这将是另一种选项，而不是使用 <div dangerouslySetInnerHTML={{__html: mySvg}} />
我希望我的迟来的回答仍对某人有用，因为我不喜欢上述任何选项。
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在您的代码中。
虽然这个问题旧了，但我没有在任何地方看到这种解决方案，所以决定发布它，希望能帮助到某些人。
如果您想要对那些SVG图标进行样式设置，您可能需要使用原始加载程序(raw loader)来加载它们：
webpack.config.js:
{
test: /\.svg$/,
loader: 'raw-loader'
}
我个人的看法是：
import closeIcon from 'svg/ic_close_black_24px.svg';
模板（Mustache使用三个大括号插入未编码的SVG数据（URL））：
<button id="closeModal">
{{{closeIcon}}}
</button>
<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。
如果我没记错的话，因为你使用了文件加载器，你可以像使用其他任何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
npm start 后才对我起作用。 - chenop与另一个使用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>
@svgr/webpack (npm) 是 create-react-app 使用的内联 SVG 加载器。
将规则添加到您的 webpack 配置中：
{
test: /\.svg$/,
use: ['@svgr/webpack'],
}
import Star from './star.svg'
const App = () => (
<div>
<Star />
</div>
)
如果使用svg-inline-loader时遇到“找不到模块”错误的用户，请尝试安装babel-plugin-inline-react-svg并将其添加到babel插件中：
"plugins": [
...
["inline-react-svg", {}]
],
...
{
test: /\.svg$/,
use: [
'svg-sprite-loader',
'svgo-loader' // Optimize SVGs (optional)
]
}
<svg>
<use xlink:href="#arrow"/>
</svg>
Angular组件
export * from 'assets/images/icons/arrow.svg';
"sideEffects": [
"*.svg",
],