如何从库中导入以显示图标(webpack/jsoneditor)？

Question

我正在使用带有节点/webpack的库jsoneditor，它工作得很好(功能/样式)，除了按钮的图像不出现。

我使用导入

import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css';
import 'jsoneditor/dist/img/jsoneditor-icons.svg';

在webpack的配置中，我尝试了使用svg的文件加载器以及David Bradshaw在answer中建议的内联svg加载器。

控制台中也没有错误消息。看起来这些图标是通过css文件加载的。和webpack一起使用图标svg文件是不是有什么特殊的事情要做？

任何帮助都将不胜感激

Answer 1

我尝试先使用'svg-inline-loader‘，但是按钮的图标无法加载。

Chrome Dev工具显示该按钮的样式为background: transparent url(<svg>...</svg>);

因此，我将加载器更改为“url- loader”，它现在可以工作了。按钮的样式更改为transparent url(/dev/assets/jsoneditor-icons.svg);

下面是我的配置：

{
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: 'url?limit=10000&mimetype=image/svg+xml&name=/assets/[name].[ext]'
}