问题标签 [svg-sprite-loader]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svg - 内联 svg vs svg Sprite vs 多个外部文件
好的，所以我主要使用 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 中配置了上面的包，如下所示：
svg - Laravel Mix 的 SVG 精灵问题
我在以下问题上苦苦挣扎，不胜感激......！
我尝试使用 Laravel Mix (v5.0.4) 并使用 SVG sprite loader ( svg-sprite-loader ) 对其进行扩展以生成 SVG sprite。我有以下文件夹结构：
的内容webpack.mix.js：
的内容webpack.sprite.js：
它对精灵没有任何作用，但它从 SASS 生成 CSS！:(我不知道为什么...尝试在扩展程序中使用一些console.log（）“调试”它并被击中，我在控制台中看到了日志消息。但是没有生成精灵。
我还尝试在扩展中使用硬编码的相对路径，而不使用path. 没有帮助。
任何想法？
提前致谢！
javascript - SVG 图标在使用文件加载器和 svg-sprite-loader 时损坏
我们的项目中使用了以下 Webpack 加载器/插件 -</p>
- CopyPlugin – 将所有资产复制到构建文件夹
- 文件加载器 - 将文件上的 import/require() 解析为 url 并将文件发送到输出目录
- Svg Sprite Loader – 从 svg 生成用于图标的 sprite
问题——</h3>
复制插件正在正确复制构建/图像中的所有资产。文件加载器尝试解析写在其中一个 less 文件中的这段代码——</p>
这样做时，它会将 slider-minus.svg 文件发送到构建目录中。
然后，svg-sprite-loader 会使用此 slider-minus.svg，并在 svg 文件中添加一些不需要的代码，如下所示 -</p>
由于此不需要的代码，无法从生成的 css 文件中正确呈现图标。
有谁知道如何更正图标渲染。项目中的许多其他图标都会发生这种情况。这是这个问题 POC 的 github url - https://github.com/msinghal56/svg-poc
要运行的命令 -
如果您对此有解决方案，请告诉我。
svgo - svg-sprite-loader outputPath 中断 svgo
我的 svgo-loader 工作正常，直到我将 outputPath 添加到我的 svg-sprite-loader。此时 svgo-loader 不再找到该文件。
svg - SVG Sprite 资源加载性能
我最近将我网站上的所有图标都切换为 SVG 图标/图像。我从一个精灵文件中提供所有的 SVG。我正在使用 Chrome Dev Tools Performance 来尝试优化资源的加载。看到这个 SVG 文件的加载总共需要 10.61 秒，我感到非常惊讶。“网络传输”耗时 141.71 毫秒，“资源加载”耗时 10.47 秒。从这张图来看，资源加载似乎也阻塞了很多其他的事情。完全披露的是，在此测试期间，我正在节流 CPU 以优化最坏情况下的性能。
但是我不明白这么小的文件如何需要 10.47 秒才能加载资源？
SVG 文件详细信息：
未压缩大小：51,183 字节
文件路径：/web_root/images/svg/all.svg
文件布局（文件中大约有 20 个左右的符号）：
我在 HTML 代码/标记中使用它的方式如下：
我对这个精灵做错了吗？我是否以错误的方式创建它？我是否在 HTML 标记中以不正确的方式使用/注入它？这个文件很小，图标/符号也很少，我不敢相信即使在受限制的 CPU 上也要花这么长时间来“资源加载”，除非我做的事情非常不正确。
任何建议将不胜感激！提前致谢！
vue.js - 为什么在 Vue 中使用 svg-sprite-loader 时 svg 无法显示？
我尝试将 svg-sprite-loader 与 Vue 一起使用，但出现了问题。似乎 svg 文件已在 <body> 的开头加载，但 <use> 标记下没有任何内容
index.js 和 iconSvg.vue 在 /views/icons/
下 *.svg 文件在 /views/icons/svg/ 下
和源文件：index.js
图标Svg.vue
main.js
vue.config.js
webpack - 从未正确解析的 SCSS 文件中从 extract-text-webpack-plugin 切换到 mini-css-extract-plugin URL 后
从extract-text-webpack-plugin到之后，mini-css-extract-plugin我在 SCSS / CSS 文件中遇到了一些问题，这些问题不再解决。这些 URL 是svg-sprites使用svg-sprite-loader. 在一切正常之前。
Webpack 只是添加了原始 svg 文件所在的完整路径（“/User/...”）。我希望我从 sprite 中获取 URL，并在末尾带有正确的哈希值，例如my-svg-sprite.svg#someid.
angular - 将 Angular 8 迁移到 12：自定义 Webpack 配置无法使用 svg-sprite-loader 构建 SVG 精灵
我从以前的开发人员那里继承了这个项目，并使用官方网站的提示将其更新为 12 角度，但是 svg sprite 的组装存在问题。我在下面附上了自定义的 webpack 配置和 package.json，感谢您的帮助！
自定义 webpack.config.js
包.json