我想知道如何使用 webpack 设置内联 svg？
我正在关注react-webpack-cookbook。
我使用文件加载器正确设置了我的webpack.config。
但是，示例显示使用这样的背景图像：
.icon {
background-image: url(./logo.svg);
}
这工作正常，但我想要一个内联 svg 图像，我该如何做到这一点以将我的logo.svg内联包含在我的react组件中？
import React, { Component } from 'react'
class Header extends Component {
render() {
return (
<div className='header'>
<img src={'./logo.svg'} />
</div>
);
}
};
export default Header
实际上，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
看起来有一个用于 react svg-inline-react的内联 svg 包装器，这将是另一种选择，而不是<div dangerouslySetInnerHTML={{__html: mySvg}} />
这是一个简单的非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());
我希望我迟到的答案仍然对某人有用，因为我不喜欢上述任何选项。
该react-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代码。
老问题，但我在任何地方都没有看到这个解决方案，所以我决定发布它，希望它能对某人有所帮助。
如果您希望能够设置这些 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 with Mustache 模板引擎
如果我没记错的话，因为您使用的是文件加载器，所以您可以像使用任何其他需求一样使用它。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