Chapter 49: Global Styling

Core Idea

Learn how to style all Lucide icons globally in your Svelte application using CSS or the Lucide context provider.

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

import { setLucideProps } from '@lucide/svelte';

setLucideProps({
  size: 32,
  color: '#4f46e5',
  strokeWidth: 1.5,
});

• 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

• Svelte: part of the Svelte section of the Lucide docs.
• Lucide for Svelte: overview page for this section.