Как сохранить цвет SVG по умолчанию с помощью mat-icon? - PullRequest
Новая
       4

Как сохранить цвет SVG по умолчанию с помощью mat-icon?

1 голос
/ 04 ноября 2019

У меня есть SVG символа Google, который в 4 разных цветах. Я хочу использовать этот SVG в своем коде с этими цветами, используя mat-icon. Однако, когда я попытался прикрепить этот SVG к моему коду, он стал черно-белым.

Вот мой код для прикрепления SVG 

   <mat-icon 
        svgIcon="google-icon">
   </mat-icon>

и объявление модуля SVG 

import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';
import { NgModule } from '@angular/core';

const googleIcon = require( 'lib/images/font-icons/google-icon.svg' );

@NgModule()
export class GoogleIconSvgModule {
    constructor(
        private iconRegistry : MatIconRegistry,
        private sanitizer : DomSanitizer,
    ) {
        iconRegistry.addSvgIcon( 'google-icon',
            sanitizer.bypassSecurityTrustResourceUrl( googleIcon ) );
    }
}

Пример SVG 

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#8EC3E5;}
    .st1{fill:#F4B61A;}
    .st2{fill:#787878;}
    .st3{fill:#A7C972;}
    .st4{fill:#E57E8F;}
</style>
<path class="st0" d="M181.6,0C81.3,0,0,32.5,0,72.6c0,7.7,0,35.9,0,43.6c0,40.1,81.4,72.6,181.6,72.6c100.4,0,181.6-32.5,181.6-72.6
    c0-7.7,0-35.9,0-43.6C363.2,32.5,282,0,181.6,0z"/>
<g>
    <path class="st1" d="M166.6,330.1c-63.4-2-127.5-16.5-166.2-44.8c0,0.5-0.3,1-0.3,1.5c0,7.7,0,35.9,0,43.6
        c0,38.1,73.4,69.3,166.6,72.4V330.1z"/>
</g>
<g>
    <path class="st2" d="M357.5,354.8c-7.6,0-13.7,2.7-18.3,8.1c-4.6,5.4-6.8,13.6-6.8,24.4c0,12.7,3.3,21.7,9.8,27.2
        c4.2,3.6,9.3,5.3,15.2,5.3c2.2,0,4.3-0.3,6.4-0.8c1.1-0.3,2.6-0.8,4.3-1.6l-9.3-8.9l9.9-10.4l9.4,8.8c1.5-3,2.5-5.6,3.1-7.9
        c0.9-3.4,1.4-7.3,1.4-11.8c0-10.4-2.1-18.4-6.4-24C371.9,357.6,365.7,354.8,357.5,354.8z"/>
    <path class="st2" d="M491.9,308.5H216.6c-11,0-20,9-20,20V446c0,11,9,20,20,20h275.3c11,0,20-9,20-20V328.5
        C511.9,317.4,502.9,308.5,491.9,308.5z M293.3,427.7c-6.5,5.6-15.7,8.4-27.6,8.4c-12.2,0-21.7-2.7-28.7-8.2
        c-7-5.5-10.4-13-10.4-22.7H245c0.6,4.2,1.8,7.4,3.5,9.5c3.2,3.8,8.7,5.7,16.4,5.7c4.6,0,8.4-0.5,11.3-1.5c5.5-1.9,8.3-5.5,8.3-10.7
        c0-3-1.3-5.4-4-7.1c-2.7-1.6-7-3.1-12.8-4.3l-10-2.2c-9.8-2.2-16.6-4.5-20.3-7.1c-6.2-4.3-9.3-10.9-9.3-20c0-8.3,3-15.1,9.1-20.6
        c6.1-5.5,15-8.2,26.8-8.2c9.9,0,18.3,2.6,25.2,7.7c7,5.2,10.6,12.6,10.9,22.5h-18.5c-0.3-5.6-2.8-9.5-7.5-11.8
        c-3.1-1.5-6.9-2.3-11.5-2.3c-5.1,0-9.2,1-12.2,3c-3,2-4.6,4.8-4.6,8.4c0,3.3,1.5,5.8,4.5,7.4c1.9,1.1,6,2.4,12.3,3.8l16.2,3.8
        c7.1,1.7,12.4,3.9,16,6.7c5.5,4.3,8.3,10.6,8.3,18.9C303.1,415.1,299.9,422.1,293.3,427.7z M392.1,440.3L381,429.8
        c-3.4,2.1-6.3,3.5-8.8,4.3c-4.1,1.4-9.1,2.1-14.9,2.1c-12,0-22-3.6-29.9-10.8c-9.5-8.6-14.3-21.3-14.3-38.1
        c0-16.9,4.9-29.6,14.7-38.3c8-7.1,17.9-10.6,29.8-10.6c11.9,0,22,3.7,30.1,11.2c9.4,8.6,14,20.7,14,36.3c0,8.2-1,15.1-3,20.7
        c-1.6,5.3-4,9.7-7.2,13.2l10.6,10L392.1,440.3z M481.9,433.6h-65.4v-92.4h19.3V417h46.1V433.6z"/>
</g>
<path class="st3" d="M216.6,278.5h77.7c42-13.3,68.9-33.9,68.9-57c0-7.3,0-32.5,0-41.7c-41.7,30.7-113.3,45.3-181.6,45.3
    c-68.4,0-139.9-14.6-181.6-45.3c0,9.2,0,34.4,0,41.7c0,39.9,80.6,72.3,180.3,72.6C189.4,284.5,202.3,278.5,216.6,278.5z"/>
<g>
    <path class="st4" d="M216.6,496c-27.6,0-50-22.4-50-50v-7c-63.4-2-127.5-16.5-166.2-44.8c0,0.5-0.3,1-0.3,1.5c0,7.7,0,35.9,0,43.6
        C0,479.5,81.4,512,181.6,512c43,0,82.5-6,113.6-16H216.6z"/>
</g>
</svg>

Здесь я хотел бычтобы получить SVG в четырех разных цветах вместо черного и белого.

1 Ответ

0 голосов
/ 04 ноября 2019

Значок Mat по умолчанию устанавливает цвет регистрируемых svgs, следуя формуле , упомянутой в документации

цвет по умолчанию для содержимого SVG - CSS currentColorстоимость. Это позволяет значкам SVG по умолчанию иметь тот же цвет, что и окружающий текст, и позволяет изменять цвет, устанавливая стиль «color» для элемента mat-icon.

Это функциональность по умолчанию инет никакого способа изменить это. Атрибут color onle получает три значения из темы css

  • Primary
  • Warn
  • Accent

Итак, вам нужно либопереопределите его глобально (таким образом уничтожив тематику всех значков материала) или для каждого случая.

Единственные опции, которые у вас есть при регистрации, - это область просмотра, поэтому вам придется пройти через css. CSS, который устанавливает currentColor, выглядит следующим образом: 

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 24px;
    fill: currentColor;
}

Чтобы избежать этого, я объявил бы в своих глобальных файлах CSS класс переопределения, чтобы объявить для каждого случая 

.mat-icon {
    .no-theme {
       fill: inherit;
    }
}

и примените класс no-theme к объявлению целевого mat-icon.

...