Capítulo 7 de 147

Chapter 7: Global Styling

Core Idea

Learn how to apply global styles to Lucide icons in your Vanilla JavaScript applications using CSS or the attrs option in createIcons.

Key Concepts

  • The color of the icons can be changed using the color CSS property.
  • The size of the icons can be changed using width and height CSS properties.
  • The stroke width of the icons can be changed using the stroke-width CSS property.

Code Examples

<!DOCTYPE html>
<html>
  <body>
    <i data-lucide="building"></i>

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

Key Takeaways

  1. The color of the icons can be changed using the color CSS property.
  2. The size of the icons can be changed using width and height CSS properties.
  3. The stroke width of the icons can be changed using the stroke-width CSS property.

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 6: Stroke widthPróximoChapter 8: Shadow DOM