angular - 在 angular 6 项目中实现多个 mat-icon 相同的 svg 图标出现在多个地方

Question

我正在使用代码在 app.component.ts 文件中动态添加 svg-icons要循环的图标的 json 数组的格式是

[{'icon-name': 'ICON1' 'icon-url','assets/imgs/icon1.svg'}, {'icon-name': 'ICON2' 'icon-url','assets/imgs/icon2.svg'} ]

MatIconRegistery 在构造函数中注入(inject):

 constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {

this.listOfIcons.forEach(icon => {
                this.matIconRegistry.addSvgIcon(icon.icon-name,
                this.domSanitizer.bypassSecurityTrustResourceUrl(icon-url.url));
            });

在 html 中我们有以下标签:

dumb组件如下:

但是，同一个图标显示在 Angular 项目的多个位置。我想知道如何在 Angular 6 项目中查看 svg 文件？

Answer 1

问题实际上可能出在 SVG 文件上。

如果您的 SVG 文件具有相同的 class 或 id 属性名称，则它们在渲染时可能会相互冲突。

对于遇到此问题的其他人，他们有重复的 id 属性名称需要更改。

对我来说，我有重复的 id 和 class 属性名称。但是，我只需要更改类名。

似乎每个人的情况都有点不同，但共同的因素是具有相同类或 id 属性名称的不同 SVG 文件之间的名称重复。

---

我保留类名“cls-1”不变的第一个 SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 134">
    <defs>
        <style>.cls-1{fill:#fff;fill-rule:evenodd;}</style>
    </defs>
    <title>Glitch_White_RGB</title>
    <path class="cls-1" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)" />
</svg>

我将类名更改为“cls-2”的第二个 SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 134">
    <defs>
        <style>.cls-2{fill:#6441a4;fill-rule:evenodd;}</style>
    </defs>
    <title>Glitch</title>
    <path class="cls-2" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)" />
</svg>

我最初发布了我的解决方案 here .帮助我解决问题的原始评论是 here .