如何使用webpack在我的React组件中直接加载SVG？
如何使用webpack在我的React组件中直接加载SVG？
提问于 2015-06-15 11:42:08
我想使用webpack在我的NextButton组件中直接呈现一个材质设计图标。以下是我的代码的相关部分：
var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg');
var NextButton = React.createClass({
render: function() {
return (
<Link to={this.props.target} className='button--next'>
{this.props.label} {NextIcon}
</Link>
)
}
});但这并没有像我想象的那样工作。它似乎将svg输出为字符串，而不是元素。
我尝试过使用raw-loader、img-loader、url-loader、file-loader和svg-loader，但我找不到正确的方法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-15 12:31:53
由于您的SVG内容存储为字符串而不是React元素，因此需要使用Dangerously Set innerHTML。
var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg');
var NextButton = React.createClass({
render: function() {
return (
<Link to={this.props.target} className='button--next'>
{this.props.label} <span dangerouslySetInnerHTML={{ __html: NextIcon }} />
</Link>
)
}
});您也许可以通过创建一个webpack加载器来解决这个问题，该加载器在您需要SVG文件时自动为您执行此操作。
dangerouslySetInnerHTML.loader.js
module.exports = function(content) {
return (
'module.exports = require("react").createElement("span", {' +
'dangerouslySetInnerHTML: {' +
'__html: ' + JSON.stringify(content) +
'}' +
'});'
);
};webpack.config.js
loaders: [
{
test: /\.svg$/,
loader: require.resolve('./dangerouslySetInnerHTML.loader'),
exclude: /node_modules/,
},
],前面的代码片段将变成：
var NextIcon = require('material-design-icons/navigation/svg/production/ic_chevron_right_18px.svg');
var NextButton = React.createClass({
render: function() {
return (
<Link to={this.props.target} className='button--next'>
{this.props.label} {NextIcon}
</Link>
)
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30844298
复制相关文章
相似问题
Webpack & React ()不加载组件(异步)
动态加载svg作为react中的组件
在react中加载svg文件而不修改webpack
无法使用Webpack加载SVG
如何使用React组件在UI中显示svg图标(.svg文件)？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
