颜色

默认情况下，所有图标的颜色值都是 currentColor。这个关键字会使用元素计算后的文本 color 值作为图标颜色。

可以在 MDN 的 currentColor 文档中了解更多。

使用 color input 调整颜色

可以通过绑定元素的 color input 调整颜色。

import { Component, ViewEncapsulation } from '@angular/core';
import { YCloudSmile } from '@ycloud-web/icons-angular';

@Component({
  selector: 'app',
  imports: [YCloudSmile],
  template: `<svg
    ycloudSmile
    color="#3e9392"
  />`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {}

Open Sandbox

使用父元素文本颜色

因为 YCloud Icons 使用 currentColor，所以图标颜色取决于当前元素计算后的 color，也可以从父元素继承。

例如，如果父元素的颜色值是 #fff，其中一个子元素是 YCloud Icons 图标，那么图标会渲染为 #fff。这是浏览器原生行为。

import { Component, ViewEncapsulation } from '@angular/core';
import { YCloudThumbsUp } from '@ycloud-web/icons-angular';

@Component({
  selector: 'app',
  imports: [YCloudThumbsUp],
  template: `
    <button style="color:#fff">
      <svg ycloudThumbsUp></svg>
      赞
    </button>
  `,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {}

Open Sandbox