问题标签 [svg-sprite]

我对 svg 精灵有疑问。我知道它是如何工作的，并且我构建了很多 svg 精灵，但现在我不知道该怎么做。在我的项目中，我使用 svg4everybody。

我在控制台中有一个错误：

“从带有 URL 的框架加载 URL 的不安全尝试。'file:' URL 被视为唯一的安全来源。”

也许你知道如何修复这个错误。

先感谢您。

我有一个带有 100 多个图标的预建 svg sprite：

如何配置 webpack 以这种简单的方式使用这样的精灵？：

大多数插件（svg-spritemap-webpack-plugin，svg-sprite-loader）旨在从许多 svg 图像构建精灵，但是我还没有找到如何配置它们以使用早期构建的精灵。

我正在使用 gulp-sprite 尝试将 svgs 加载到样式指南中。我已经创建了 icon.svg，但是当我尝试使用 xlink:href 在不同的 HTML 文件中显示它们时，svg 没有显示。影子根是空的。

我尝试了多种方法，这在 Edge 中有效，但在其他浏览器中无效。我什至让它工作，包括精灵，但将它隐藏在 html 中。

我希望图标在那里并且阴影根不为空。应该包括路径

我svg-sprite-loader在尝试从 svg sprite 文件加载图标时使用该插件，但是，页面失败并出现 webpack 错误“未定义导出”。会发生什么？如何调试这样的 webpack 加载器并获得更多相关的错误消息？

除了适应反应外，我遵循了本教程。

我得到的错误是：

这是所有代码：

组件代码

输出这个反应代码

以及生成的 JS

Webpack 配置

图标精灵文件

我在设置 web-pack 4 和 svg-sprite-loader 以将 svg 图标呈现为背景图像时遇到问题。我按照 svg-sprite-loader 的官方文档（https://github.com/kisenka/svg-sprite-loader/tree/master/examples/extract-mode）的这些说明进行操作。

我已经成功地在我的 dist 文件夹中创建了 sprite.svg 文件，并将其用作我在 html 中的 use 标签的参考。但是，我也尝试使用 src/images/icons 文件夹中的 svg 图标作为背景图像，如下所示：

这样做时，webpack 会正确编译，但会在 dist css 文件中创建它：

任何帮助都会很棒。

这是我的 webpack 配置文件：

我目前正在尝试每页使用一个 svg sprite，以便它只为每个单独的页面加载必要的 svg。目前正在工作，但我想创建一个数组，以便为​​我想要的 N 个页面调用任务。

我目前在 gulpfile.js（版本 4）中有这个结构：

这个想法是创建一个包含页面名称的数组并执行一个 for 循环：

然后在控制台中只调用任务，但返回只进行一次迭代，有人以前有过吗？

谢谢 ！

I am trying to use svg-sprite-loader package (to create a svg sprite) with my Angular 8 project using custom webpack config.

I am using below custom config:

I am getting following error while running ng build:

Cannot find module 'webpack/package.json' Error: Cannot find module 'webpack/package.json'

I am not able to identify where the issue is, is it with my config or the package itself.

我正在使用车把模板引擎

任何人都可以向我解释这里有什么区别以及为什么一个有效而另一个无效。

另外，请告诉我是否有更好的方法来处理脚本。最好是跨文档脚本，而不是使用标签onclick上的属性svg/use

我将嵌入 HTML 的 svg 更改为由 Webpack 提供的文件位置。

这适用于 Nginx 页面。但这在我的 Tomcat 页面中不起作用，我正在努力。

有什么问题？（向上箭头应该加载到第二张图片的圆圈中）

好的，所以我主要使用 Laravel 和 Vue js 构建一个 Web 应用程序。我尝试使用https://github.com/JetBrains/svg-sprite-loader#installation但导出的 svg 显示为空白。

在继续之前的那种情况下，我开始怀疑这是否真的值得，我不确定。

所以我的问题是，真正的区别是什么？

假设我们不能使用图标字体，因为我们想要多色的 svg。

• 是否值得尝试使用一个包将 svgs 合并到一个 sprite 中然后使用它，或者它与 http/2 并没有真正的区别？

• 考虑到文件大小和数据使用情况，是否值得尝试使用 sprite 而不是多个外部 svg 文件来最小化这方面？

• 内联 svgs 也是一种选择，但这会大大增加 dom 的大小。

所以我想知道......有没有人尝试过所有这些技术并找出最好和最高效的技术以及它们的真正区别是什么。

最后，如果有人能给我一些关于为什么我的 svg sprite 显示为空白的输入，那将是一个巨大的奖励：P

我已经在我的 webpack.mix 中配置了上面的包，如下所示：