### Importing and Using Basic Svelte Lucide Icons

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Demonstrates how to import individual icon components from the 'svelte-lucide' package and render them within a Svelte application. Each icon is treated as a standard Svelte component.

```svelte
<script>
  import { ArrowRight, Heart, User, Settings } from 'svelte-lucide';
</script>

<div>
  <ArrowRight />
  <Heart />
  <User />
  <Settings />
</div>
```

--------------------------------

### Enhancing Accessibility with Title and Description in Svelte Lucide

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Explains how to improve icon accessibility by providing 'title' and 'desc' objects. These props generate appropriate SVG 'title' and 'desc' elements with unique IDs, aiding screen reader users.

```svelte
<script>
  import { Download, Trash, Edit } from 'svelte-lucide';
</script>

<div>
  <Download
    title={{ id: 'download-title', title: 'Download file' }}
    desc={{ id: 'download-desc', desc: 'Click to download the selected file' }}
  />

  <Trash
    title={{ title: 'Delete item' }}
    desc={{ desc: 'Permanently remove this item' }}
  />

  <Edit
    title={{ id: 'edit-title', title: 'Edit content' }}
  />
</div>
```

--------------------------------

### Responsive Icon Sizing with CSS Variables in Svelte

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Implements responsive icon sizing using CSS custom properties that adjust based on viewport size. Icons from 'svelte-lucide' are rendered within a container where CSS variables control their size.

```svelte
<script>
  import { Sun, Moon, Cloud } from 'svelte-lucide';
</script>

<style>
  .icon-container {
    --icon-size: 20px;
  }

  @media (min-width: 768px) {
    .icon-container {
      --icon-size: 24px;
    }
  }

  @media (min-width: 1024px) {
    .icon-container {
      --icon-size: 32px;
    }
  }
</style>

<div class="icon-container">
  <Sun size="var(--icon-size)" />
  <Moon size="var(--icon-size)" />
  <Cloud size="var(--icon-size)" />
</div>
```

--------------------------------

### Combining Multiple Props for Advanced Svelte Lucide Icon Customization

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Demonstrates the flexibility of Svelte Lucide by combining various props like 'size', 'color', 'strokeWidth', 'ariaLabel', 'title', and 'role' to achieve highly customized icon components.

```svelte
<script>
  import { ShoppingCart, Bell, User } from 'svelte-lucide';
</script>

<div>
  <ShoppingCart
    size="28"
    color="#2563eb"
    strokeWidth="2"
    ariaLabel="Shopping cart with 3 items"
    title={{ title: 'Shopping cart' }}
    role="img"
  />

  <Bell
    size="24"
    color="var(--accent-color)"
    strokeWidth="1.5"
    ariaLabel="3 new notifications"
    focusable="true"
    class="notification-icon"
  />

  <User
    size="32"
    color="#64748b"
    strokeWidth="2"
    title={{ id: 'user-icon', title: 'User profile' }}
    desc={{ id: 'user-desc', desc: 'Access user profile settings' }}
    ariaLabel="User profile menu"
  />
</div>
```

--------------------------------

### Configuring Stroke Width for Svelte Lucide Icons

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Demonstrates how to modify the thickness of the icon's stroke using the 'strokeWidth' prop. This allows for visual hierarchy adjustments and adherence to specific design system requirements.

```svelte
<script>
  import { Menu, X, Plus } from 'svelte-lucide';
</script>

<div>
  <Menu strokeWidth="1" />
  <X strokeWidth="2" />
  <Plus strokeWidth="3" />
  <Menu strokeWidth="1.5" />
</div>
```

--------------------------------

### Theme-Aware Icon Styling with CSS Variables in Svelte

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Creates theme-aware icons that adapt to light and dark modes using CSS custom properties and color inheritance. Applies different icon colors based on a `data-theme` attribute.

```svelte
<script>
  import { Sun, Moon, Zap, Heart } from 'svelte-lucide';
</script>

<style>
  :global([data-theme="light"]) {
    --icon-color: #1e293b;
    --accent-color: #3b82f6;
  }

  :global([data-theme="dark"]) {
    --icon-color: #f1f5f9;
    --accent-color: #60a5fa;
  }
</style>

<div data-theme="light">
  <Sun color="var(--icon-color)" size="24" />
  <Moon color="var(--icon-color)" size="24" />
  <Zap color="var(--accent-color)" size="24" />
  <Heart color="var(--accent-color)" size="24" />
</div>
```

--------------------------------

### Dynamically Select Icons in Svelte

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Dynamically selects and renders icons based on component state or user input using Svelte's component binding syntax. Imports icons from 'svelte-lucide' and uses a map to associate string keys with icon components.

```svelte
<script>
  import { Home, User, Settings, Mail, Calendar } from 'svelte-lucide';

  const icons = {
    home: Home,
    user: User,
    settings: Settings,
    mail: Mail,
    calendar: Calendar
  };

  let selectedIcon = 'home';
</script>

<select bind:value={selectedIcon}>
  <option value="home">Home</option>
  <option value="user">User</option>
  <option value="settings">Settings</option>
  <option value="mail">Mail</option>
  <option value="calendar">Calendar</option>
</select>

<svelte:component
  this={icons[selectedIcon]}
  size="32"
  color="#2563eb"
  ariaLabel={`${selectedIcon} icon`}
/>
```

--------------------------------

### Configuring ARIA Labels and Focusable for Svelte Lucide Icons

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Shows how to manage accessibility for screen readers and keyboard navigation using the 'ariaLabel' and 'focusable' props. 'focusable' can be set to 'true', 'false', or 'auto'.

```svelte
<script>
  import { Info, Help, Warning } from 'svelte-lucide';
</script>

<div>
  <Info ariaLabel="Information icon" focusable="true" />

  <Help
    ariaLabel="Help documentation"
    focusable="false"
  />

  <Warning
    ariaLabel="Warning message"
    focusable="auto"
  />
</div>
```

--------------------------------

### Styling Svelte Lucide Icons with Color

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Illustrates how to apply custom colors to Svelte Lucide icons using the 'color' prop. This prop accepts any valid CSS color value, including hex codes, RGB, named colors, and CSS variables.

```svelte
<script>
  import { Star, AlertCircle, Check } from 'svelte-lucide';
</script>

<div>
  <Star color="#FFD700" />
  <AlertCircle color="rgb(239, 68, 68)" />
  <Check color="green" />
  <Star color="var(--primary-color)" />
</div>
```

--------------------------------

### Passing Through SVG Attributes in Svelte Lucide

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Illustrates how Svelte Lucide components inherently support standard SVG attributes. Developers can directly apply attributes like 'class', 'style', 'transform', 'viewBox', 'fill', and 'stroke' for advanced SVG manipulations.

```svelte
<script>
  import { Circle, Square, Triangle } from 'svelte-lucide';
</script>

<div>
  <Circle
    class="icon-primary"
    style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
    opacity="0.8"
  />

  <Square
    transform="rotate(45)"
    viewBox="0 0 24 24"
    preserveAspectRatio="xMidYMid meet"
  />

  <Triangle
    fill="currentColor"
    stroke="none"
    class="animated-icon"
  />
</div>
```

--------------------------------

### Customizing Svelte Lucide Icon Size

Source: https://context7.com/shinokada/svelte-lucide/llms.txt

Shows how to adjust the dimensions of Svelte Lucide icons using the 'size' prop. This prop accepts various string formats, including pixel values and CSS units like 'rem'.

```svelte
<script>
  import { Home, Search, Bell } from 'svelte-lucide';
</script>

<div>
  <Home size="16" />
  <Search size="24" />
  <Bell size="32" />
  <Home size="2rem" />
  <Search size="48px" />
</div>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.