Question

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

[{'icon-name'：'ICON1''icon-url'，'assets / imgs / icon1.svg'}，{'icon-name'：'ICON2''icon-url'，'资产/ imgs / icon2.svg'}]

MatIconRegistery被注入到构造函数中：

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

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

在html中，我们具有以下标记：

愚蠢的组件如下：

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

Answer 1

SVG文件确实有可能是问题所在。

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

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

对我来说，我有重复的ID AND类属性名称。但是，我只需要更改班级名称。

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

我的第一个SVG保持不变，其类名为“ cls-1”：

<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>

第二个SVG，我将类名称更改为“ cls-2”：

<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。

在angular 6项目中实现多个mat-icon，同一svg图标出现在多个位置

1 个答案:

SVG文件确实有可能是问题所在。