Angular 8 中的空白图标(SVG 精灵)
Blank icons (SVG sprite) in Angular 8
我已经使用 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 模式下表现良好。
未检测到出现这种行为的原因。我已经深入了解情况并尝试了大量解决方案来找到差距位置。唯一将事情从死点移开但完全没有解决问题的方法是在 icon.component 中添加 ChangeDetection.markForCheck()。我很确定你的项目越大,你就越接近这个问题(我的情况是一个巨大的企业,这个问题变得非常关键,因为几乎所有的图标都消失了)。
不适合你的解决方案(使用这种 sprite 方法):
使用任何类型的方法预取符号-defs.svg,通过使用 link rel="prefetch" 或使用 angular APP_INITIALIZER 方法预加载它。
解决问题的方案(但仍然不会带来上一个问题的答案)是:
将您的 SVG 精灵放在 index.html 结束标签
我已经使用 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 模式下表现良好。
未检测到出现这种行为的原因。我已经深入了解情况并尝试了大量解决方案来找到差距位置。唯一将事情从死点移开但完全没有解决问题的方法是在 icon.component 中添加 ChangeDetection.markForCheck()。我很确定你的项目越大,你就越接近这个问题(我的情况是一个巨大的企业,这个问题变得非常关键,因为几乎所有的图标都消失了)。
不适合你的解决方案(使用这种 sprite 方法):
使用任何类型的方法预取符号-defs.svg,通过使用 link rel="prefetch" 或使用 angular APP_INITIALIZER 方法预加载它。
解决问题的方案(但仍然不会带来上一个问题的答案)是:
将您的 SVG 精灵放在 index.html 结束标签