颜色

🌐 Color

默认情况下，所有图标的颜色值为：currentColor。此关键字使用元素计算得到的文本 color 值来表示图标颜色。

🌐 By default, all icons have the color value: currentColor. This keyword uses the element's computed text color value to represent the icon color.

在 MDN 上阅读更多关于 currentColor 的内容。

🌐 Read more about currentColor on MDN.

使用 color 输入调整颜色

🌐 Adjust the color using the color input

可以通过绑定元素的 color 输入来调整颜色。

🌐 The color can be adjusted by binding the color input of the element.

import { Component, ViewEncapsulation } from "@angular/core";
import { LucideSmile } from "@lucide/angular";

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

Open Sandbox

使用父元素文本颜色值

🌐 Using parent elements text color value

由于 lucide 图标的颜色使用 currentColor，图标的颜色取决于元素的计算 color，或者它从其父元素继承。

🌐 Because the color of lucide icons uses currentColor, the color of the icon depends on the computed color of the element, or it inherits it from its parent.

例如，如果父元素的颜色值是 #fff，而其中一个子元素是 lucide 图标，该图标的颜色将显示为 #fff。这是浏览器的原生行为。

🌐 For example, if a parent element's color value is #fff and one of the children is a lucide icon, the color of the icon will be rendered as #fff. This is browser native behavior.

import { Component, ViewEncapsulation } from "@angular/core";
import { LucideThumbsUp } from "@lucide/angular";

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

Open Sandbox