颜色

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

可以通过将 color 属性传递给元素来调整颜色。

¥The color can be adjusted by passing the color prop to the element.

import { Smile } from "lucide-react";

function App() {
  return (
    <div className="app">
      <Smile color="#3e9392" />
    </div>
  );
}

export default 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 { ThumbsUp } from "lucide-react";

function LikeButton() {
  return (
    <button style={{ color: "#fff" }}>
      <ThumbsUp />
      Like
    </button>
  );
}

export default LikeButton;

Open Sandbox