Icon Component

A wrapper component that dynamically renders icons from the Lucide icon library (@lucide/vue). Pass an icon name as a prop and the component maps it to the corresponding Lucide icon with configurable size, color, stroke, and styling.

---

Table of Contents

• Import
• Basic Usage
• Props
• TypeScript Interfaces
• Icon Naming Convention
• Usage Examples
• Best Practices
• Troubleshooting

---

Import

import { Icons } from "dolphin-components";
import type { IconProps } from "dolphin-components";

Note: The component is exported as Icons (plural).

---

Basic Usage

<template>
  <Icons name="Home" />
</template>

<script setup>
import { Icons } from "dolphin-components";
</script>

---

Props

Prop	Type	Default	Description
name	string	—	Required. The PascalCase name of the Lucide icon.
size	number | string	16	Icon size in pixels.
color	string	"currentColor"	The color of the icon (CSS color value).
strokeWidth	number	2	Thickness of the icon's strokes.
absoluteStrokeWidth	boolean	false	Whether to use absolute stroke width (non-scaling).
classValue	string	""	Additional CSS classes for custom styling.

---

TypeScript Interfaces

interface IconProps {
  name: string;
  size?: number | string;
  color?: string;
  strokeWidth?: number;
  absoluteStrokeWidth?: boolean;
  classValue?: string;
}

---

Icon Naming Convention

Lucide icons use PascalCase naming. Convert the hyphenated icon name from the Lucide website:

Lucide Website Name	Component name Prop
home	Home
refresh-cw	RefreshCw
file-text	FileText
arrow-left	ArrowLeft
chevron-down	ChevronDown
circle-check	CircleCheck

Browse available icons at: https://lucide.dev/icons/

---

Usage Examples

Different Sizes

<Icons name="Star" :size="12" />
<Icons name="Star" :size="16" />
<Icons name="Star" :size="24" />
<Icons name="Star" :size="32" />

Custom Colors

<Icons name="Heart" color="red" />
<Icons name="CheckCircle" color="#22c55e" />
<Icons name="AlertTriangle" color="orange" />

Custom Stroke Width

<Icons name="Edit" :strokeWidth="1" />   <!-- Thin -->
<Icons name="Edit" :strokeWidth="2" />   <!-- Normal -->
<Icons name="Edit" :strokeWidth="3" />   <!-- Bold -->

In a Button

<button class="btn btn-primary flex items-center gap-1.5">
  <Icons name="Plus" :size="16" />
  Add User
</button>

<button class="btn btn-outline-secondary flex items-center gap-1.5">
  <Icons name="Download" :size="16" />
  Export
</button>

<button class="btn btn-icon">
  <Icons name="Settings" :size="18" />
</button>

With Custom CSS Class

<Icons name="Loader" classValue="animate-spin" :size="20" />

---

Screenshot

---

Best Practices

1. Use PascalCase names — Always convert from the Lucide website's hyphenated format.
2. Use currentColor for theme consistency — The default color inherits from the parent element's text color, which works well with Tailwind utilities.
3. Use .btn-icon for icon-only buttons — The CSS utility provides proper sizing and padding for buttons containing only an icon.
4. Keep sizes consistent — Use 16 for inline text, 18 for buttons, 24 for standalone icons.

---

Troubleshooting

Icon not rendering

• Verify the name prop is in PascalCase (e.g., "RefreshCw", not "refresh-cw").
• Check that the icon name exists on lucide.dev/icons.
• Ensure @lucide/vue is installed (it's a dependency of dolphin-components).

Icon too small / too large

• Check the size prop value. Default is 16 pixels.