颜色

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

在 MDN 上阅读更多关于 currentColor 的信息。

使用 `color` 属性调整颜色

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

<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="smile" color="#3e9392"></i>

    <script src="index.js"></script>
  </body>
</html>

Open Sandbox

使用父元素的文本颜色值

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

例如，如果父元素的颜色值为 #fff 且其中一个子元素是 Lucide 图标，则图标的颜色将渲染为 #fff。这是浏览器的原生行为。

<!DOCTYPE html>
<html>
  <body>
    <button style="color: white">
      <i data-lucide="thumbs-up"></i>
      Like
    </button>

    <script src="index.js"></script>
  </body>
</html>

Open Sandbox

颜色 ​

使用 color 属性调整颜色 ​

使用父元素的文本颜色值 ​

颜色

使用 `color` 属性调整颜色

使用父元素的文本颜色值