Capítulo 4 de 147

Chapter 4: Color

Core Idea

Learn how to customize the color of Lucide icons in your Vanilla JavaScript applications using the color attribute and CSS.

Key Concepts

  • Adjust the color using the color attribute
  • Using parent elements text color value

Code Examples

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

    <script src="index.js"></script>
  </body>
</html>
  • What it demonstrates: Color usage pattern from the official Lucide docs.

Key Takeaways

  1. Adjust the color using the color attribute
  2. Using parent elements text color value

Connects To

  • Vanilla JS (core): part of the Vanilla JS (core) section of the Lucide docs.
  • Lucide for Vanilla JavaScript: overview page for this section.
AnteriorChapter 3: Migration from v0PróximoChapter 5: Sizing