如何从库中导入以便显示图标（webpack / jsoneditor）？

Question

我正在使用带有node / webpack的库jsoneditor，它工作正常（功能/样式），但按钮的图像不会出现。

我用

导入

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

在webpack配置中，我尝试使用svg的文件加载器以及inline-svg-loader，正如David Bradshaw在answer

中所建议的那样

控制台中也没有错误消息。看起来这些图标是通过css文件加载的。有什么特别的东西要用webpack使用icon svg文件吗？

任何帮助将不胜感激

Answer 1

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

Chrome开发者工具显示按钮的样式为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]'
}