问题标签 [svg-sprite]

我正在构建一个 Angular 应用程序（Angular 4/5/6）并且想在我的组件模板中使用 SVG 精灵。

问题： 假设我已经生成了我的 SVG 图标精灵 ( icons.svg)，我怎样才能让 Angular 将我的 SVG 图标精灵注入/导入到我的组件模板中？

有没有一种方法可以将我的 SVG 图标精灵注入/导入到我的组件中，而无需使用任何 3rd 方模块/指令并使用 Angular 本身进行本地化？

背景/问题：

正如本文所讨论的，文件icons.svg将包含所有定义为<symbol>. 然后我可以在我的 HTML 中渲染选定的图标，<use>假设它icons.svg被注入到 DOM 中。

我使用IcoMoon app生成了 SVG 精灵，并将其保存icons.svg到我的 Angular 应用程序中。下面是我尝试在其中注入/导入文件并尝试在我的 HTML 中呈现 SVG 图标的示例 Angular 组件 ( app.component.ts )。icons.svg但是，Angular 不会渲染我的 SVG 图标。我似乎错误地注入了 SVG 图标精灵文件。

更新：

1. 我已经知道一个类似的问题，带有 angular-cli 的 SVG 图标系统，其中建议的答案是使用 Node 模块svg-sprite使用 CSS 模式生成 SVG 精灵。然而，这不是我要问的。我不是想生成 SVG 精灵。我正在尝试让 Angular 组件了解我的 SVG 精灵，icons.svg并在我使用它们时让它在 HTML 中呈现它们。
2. 建议使用解决方案https://stackoverflow.com/a/50460361/4988010从 SVG 精灵生成 CSS 字体。我觉得这不是一个可行的解决方案，而是无法使用 SVG sprite 的“解决方法”。

app.component.ts：StackBlitz 上的实时示例：https ://stackblitz.com/edit/angular-bbr2kh?file=src/app/app.component.ts

有没有办法preserveAspectRatio使用 CSS、HTML 或其他方法（除了 JavaScript）为每个实例设置 SVG 精灵的值？

例如（这些似乎都不起作用）：

.

.

.

.

我正在尝试配置svg-sprite-loader/plugin. 我已经为该任务制作了独立的 Webpack 配置文件。它查看指定的目录并从中获取所有.svg内容。结果是icons.svg精灵文件。但是Webpack 也会.js为每个入口文件创建。是否可以排除或...删除...或任何...这些文件？换句话说，我只需要插件输出，没有别的。

先感谢您！

PS也许我应该在任务完成后以编程方式删除这些文件？

webpack.prod.conf.js

webpack.sprites.conf.js

我在使用 SVG 精灵在组件上使用 Jest 和 Enzyme 创建快照测试时遇到问题。

我正在使用包 svg-sprite-loader：https ://github.com/kisenka/svg-sprite-loader

这是给它带来麻烦的组件：

这是开玩笑的错误：

我试图按照 Jest 的指导来处理静态资产，如下所示：

最后是我项目的 GitHub 的链接：https ://github.com/deannellis/tabletop

我正在使用 React，并且正在尝试从精灵加载 svg 图标。我的精灵是这样的：

我加载它：

没有结果。我以沙箱为例：https ://codesandbox.io/s/l711v6j7v7

我在查看选取的元素并将颜色应用于选取的元素时遇到问题。

例如，我有一个名为 untitled.svg 的图像精灵，其中列出了图标集合。我想选日历。我可以选择元素，但无法查看或设置所选元素日历的样式。我可以看到正在渲染的路径，但无法设置输出样式。

日历的代码示例

我错过了什么。我是深入使用 svgs 的新手。

我有一个带有 gulp 工作流的前端项目。

插件：

• gulp-注入
• 浏览器同步
• 吞咽手表
• gulp-useref

gulpfile.js：

html:

在 html 文件发生更改之前，一切正常。任何更改都会导致编译的内联 svg 文件在 html 文件中消失（在注入中）。

我试试代码：

gulpfile.js：

html一切正常，网络服务器重新启动并清除任何文件并保存 svg精灵的更改，但任务useref()停止工作。

构建vendor.js文件，但不写入dist/index.html. 并且在生成之后应该是：

问题：是否可以配置 gulpfile.js 以便您可以更改 html 文件，而无需在控制台中重新启动整个程序集，也不会丢失 html 文件中生成的 svg sprite？

我使用 gulp-svg-sprites 插件创建了一个 svg sprite。编译后，将负的 viewBox 值替换为正值，并在它们之前添加 NaN。带有负值的图标看起来不完整，被裁剪。帮助解决这个问题。谢谢

吞咽任务

初始化视图框：viewBox="-89 140 512 512"

在输出中完成 viewBox：viewBox="NaN 89 140 512 512"

输出中的预期视图框：viewBox="-89 140 512 512"

我正在尝试使用 npm package svg-sprite 创建 svg-sprite。最终我得到了精灵，看起来像这样：

要定义此 svg-sprite 的大小（例如宽度），我使用来自 util ImageMagick的命令identify。

或将其写入文件

问题是在文件中我没有得到完整 svg-sprite 的宽度（108），但只有最后一个子 svg 图像的宽度（54），它包含在常见的 svg-sprite 中。

请告诉我我的错误在哪里？如何使识别返回正确的宽度。或者建议我另一种变体来解决问题。

我的数据库中有一个 SVG 精灵和一个图标/徽标列表。

我遍历所有这些并使用模板引擎生成我的图标，例如：

我可能没有为数据库中的每个项目提供 SVG，在这种情况下，模板会呈现一个空白区域。

我该如何做到这一点，如果（例如）svg/icons.svg#wt-icon-stackoverflow尽管不存在，仍然显示默认值（即：）svg/icons.svg#wt-icon-default？