javascript - 如何从库中导入以便显示图标(webpack/joneditor)？

Question

我正在使用图书馆 jsoneditor使用 node/webpack 并且它工作正常(功能/样式)，除了按钮的图像没有出现。

我导入了

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

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

控制台中也没有错误消息。看起来图标是通过 css 文件加载的。要在 webpack 中使用图标 svg 文件，我需要做些什么特别的事情吗？

任何帮助将不胜感激

Answer 1

我先尝试使用'svg-inline-loader'，但是按钮的图标加载不出来。

Chrome Dev Tools 显示按钮的样式是 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]'
}