svg - 如何自动化我的 webpack 构建以自动转义 SASS 和 HTML 文件中的数据 URI？

Question

我面临的问题是 Firefox 不支持#数据 URI 中的字符。Chrome 或 Safari 对此完全没问题。

我们的 UI 人员使用了大量的 SVG 内联，这些都包含数据 URIS

例如在scss文件中：

content: url('data:image/svg+xml;utf8,<svg ...</svg>');

并在html文件中：

<img src='data:image/svg+xml;utf8,<svg width="234px" height="205px"...</svg>'>

并且有 100 个这样的示例，但这些示例在 Firefox 中都不起作用，因为它们具有#字符，我收到以下错误

但是当我们尝试%23替换该字符时，SVG 会正确加载。

我怎样才能自动化构建，以便这些得到 url 编码。

字符串替换必须非常具体，并且只需要img在 htmlurl('data:image/svg+xml;utf8中的标签和较少的文件中进行。

这就是我正在考虑做的事情：如果用 webpack 更难做，找到所有stroke="# 并替换为stroke='%23和相同的东西fill

标签： svgwebpackcss-loaderraw-loader