Angular 8 中的空白图标（SVG 精灵）

Question

我已经使用 icomoon 生成了 SVG spite，为了提供软可用性，我已经为它创建了一个组件，并意识到直到现在这已经足够了。一些图标只是变成空白。而且我仍然找不到导致这种行为的原因。我调查了 Stack Overflow 上的所有问题（不仅如此），但没有找到解决我问题的任何解决方案。

我在 index.html 中预取了符号-defs.svg（符号大小-defs.svg ~ 200kb）：

<link rel="prefetch" href="assets/icon/symbol-defs.svg" as="image" />

结果，我得到了这个：

大多数图标为空 space。

图标组件：

@Component({
  selector: 'icon',
  templateUrl: './icon.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconComponent {
  @Input()
  set icon(icon: string) {
    this.use = icon ? `${this.location}#${icon}` : '';
  }

  use: string;
  location: string = 'assets/icon/symbol-defs.svg';
}

图标组件HTML:

<svg>
  <use [attr.xlink:href]="use" [attr.href]="use"></use>
</svg>

用法：

<icon icon="finance-service"></icon>

更新：

此问题仅在 prod 模式下出现，在 dev 模式下表现良好。

Answer 1

未检测到出现这种行为的原因。我已经深入了解情况并尝试了大量解决方案来找到差距位置。唯一将事情从死点移开但完全没有解决问题的方法是在 icon.component 中添加 ChangeDetection.markForCheck()。我很确定你的项目越大，你就越接近这个问题（我的情况是一个巨大的企业，这个问题变得非常关键，因为几乎所有的图标都消失了）。

不适合你的解决方案（使用这种 sprite 方法）：

使用任何类型的方法预取符号-defs.svg，通过使用 link rel="prefetch" 或使用 angular APP_INITIALIZER 方法预加载它。

解决问题的方案（但仍然不会带来上一个问题的答案）是：

将您的 SVG 精灵放在 index.html 结束标签

Angular 8 中的空白图标（SVG 精灵）

Blank icons (SVG sprite) in Angular 8

angular

svg

svg-sprite