Blade Untitledui Icons Laravel Package

Getting Started

Install the package via Composer:

composer require mckenziearts/blade-untitledui-icons

Publish the config file (optional, but recommended for customization):

php artisan vendor:publish --provider="McKenzieArts\BladeUntitledUIIcons\BladeUntitledUIIconsServiceProvider" --tag=config

This creates config/blade-untitledui-icons.php, where you can set default options like prefix, class, or size. In your Blade views, use icons as Blade components, e.g.:

<x-untitledui-icons.user />
<x-untitledui-icons.search size="24" class="text-gray-500" />

Icons are automatically loaded from vendor/mckenziearts/blade-untitledui-icons/resources/svg/.

Implementation Patterns

• Dynamic Icons: Use variable-based naming with @php or Livewire:

  @php($icon = 'check')
  <x-untitledui-icons.{{ $icon }} />
  

• Groups & Reusability: Wrap commonly used icon sets in dedicated Blade components:

  {{-- resources/views/components/social/github.blade.php --}}
  <x-untitledui-icons.github {{ $attributes->merge(['class' => 'w-6 h-6']) }} />
  

• Customizing Styling: Pass Tailwind classes via attributes:

  <x-untitledui-icons.menu class="w-5 h-5 dark:text-white" />
  

• Fallbacks & Validation: For dynamic icons, use @isset or check existence first in Blade to avoid errors (no built-in fallback).

Gotchas and Tips

• Version Mismatch Risk: The package’s last release is dated 2026-03-03—likely a typo. Verify the actual repo/branch to avoid stale or non-functional icon sets. Cross-check with Untitled UI for icon availability.
• Component Naming: Icons are named using kebab-case (e.g., user, check-circle), but Blade uses dot notation (<x-untitledui-icons.user-circle />). Ensure underscores/dashes match the underlying filename (user_circle.svg → user.circle).
• Performance: Each icon loads its own SVG—no SVG sprite. This is fine for <20 icons per page, but for large apps, consider compiling with blade-snapshot or switching to an icon font.
• Tailwind Integration: The package sets default w-6 h-6; override in the config or on each instance. Avoid hardcoding sizes in views to maintain consistency.
• Customization Hook: Extend via custom SVGs by adding a custom disk or folder in the config, then use <x-untitledui-icons.custom::my-icon />.