SVG Icons & Blade Icons

Overview

UltraViolet Pro includes comprehensive SVG icon support through the Blade Icons package and custom HUD-style SVG elements. This guide covers everything you need to know about using SVG icons in your Livewire components and Blade views.

What's Included

1. Blade Icons Package

blade-ui-kit/blade-icons: ^1.8 - Core SVG icon system
mallardduck/blade-boxicons: ^2.4 - Boxicons icon set integration

2. Custom HUD SVGs

Animated divider elements
Futuristic UI components
Sci-fi inspired graphics

3. Example Icons

Emoji-style icons
UI element icons
Decorative graphics

Blade Icons Package

Installation & Setup

The Blade Icons package is pre-installed in UltraViolet Pro. It provides a simple way to use SVG icons in your Blade templates.

Package Configuration (composer.json):

{
    "require": {
        "blade-ui-kit/blade-icons": "^1.8",
        "mallardduck/blade-boxicons": "^2.4"
    }
}

Basic Usage

1. Using Boxicons

<!-- Basic usage -->
<x-bx-home class="w-6 h-6" />

<!-- With custom classes -->
<x-bx-user class="w-8 h-8 text-blue-500" />

<!-- With attributes -->
<x-bx-settings class="w-5 h-5" id="settings-icon" />

2. Available Icon Sets

UltraViolet includes 84 different icon sets through Blade Icons:

Boxicons (Regular, Solid, Logos)
Heroicons (Outline, Solid)
Material Design Icons
Font Awesome (Brands, Regular, Solid)
Feather Icons
Lucide Icons
Tabler Icons
And many more!

Icon Set Examples

Boxicons (Included)

<!-- Regular icons -->
<x-bx-home />
<x-bx-user />
<x-bx-settings />
<x-bx-search />
<x-bx-heart />
<x-bx-star />

<!-- Solid icons -->
<x-bxs-home />
<x-bxs-user />
<x-bxs-settings />
<x-bxs-heart />
<x-bxs-star />

<!-- Logo icons -->
<x-bxl-github />
<x-bxl-twitter />
<x-bxl-facebook />
<x-bxl-instagram />

Heroicons

<!-- Outline -->
<x-heroicon-o-home />
<x-heroicon-o-user />
<x-heroicon-o-cog-6-tooth />

<!-- Solid -->
<x-heroicon-s-home />
<x-heroicon-s-user />
<x-heroicon-s-cog-6-tooth />

Material Design Icons

<x-gmdi-home />
<x-gmdi-person />
<x-gmdi-settings />
<x-gmdi-search />

Styling Icons

1. Size Classes

<!-- Tailwind CSS sizes -->
<x-bx-home class="w-4 h-4" />  <!-- 16px -->
<x-bx-home class="w-5 h-5" />  <!-- 20px -->
<x-bx-home class="w-6 h-6" />  <!-- 24px -->
<x-bx-home class="w-8 h-8" />  <!-- 32px -->
<x-bx-home class="w-10 h-10" /> <!-- 40px -->

2. Color Classes

<!-- Text colors -->
<x-bx-home class="text-blue-500" />
<x-bx-home class="text-red-500" />
<x-bx-home class="text-green-500" />
<x-bx-home class="text-gray-500" />

<!-- With hover effects -->
<x-bx-home class="text-gray-500 hover:text-blue-500 transition-colors" />

3. Custom CSS

<x-bx-home class="icon-custom" />

<style>
.icon-custom {
    width: 24px;
    height: 24px;
    color: #3b82f6;
    transition: transform 0.2s;
}

.icon-custom:hover {
    transform: scale(1.1);
}
</style>

In Livewire Components

1. Basic Component Usage

<?php
namespace App\Livewire;

use Livewire\Component;

class UserProfile extends Component
{
    public $user;

    public function render()
    {
        return view('livewire.user-profile');
    }
}

<!-- resources/views/livewire/user-profile.blade.php -->
<div class="user-profile">
    <div class="flex items-center space-x-3">
        <x-bx-user class="w-8 h-8 text-blue-500" />
        <h2>{{ $user->name }}</h2>
    </div>

    <div class="mt-4 space-y-2">
        <div class="flex items-center space-x-2">
            <x-bx-envelope class="w-4 h-4 text-gray-500" />
            <span>{{ $user->email }}</span>
        </div>

        <div class="flex items-center space-x-2">
            <x-bx-phone class="w-4 h-4 text-gray-500" />
            <span>{{ $user->phone }}</span>
        </div>
    </div>
</div>

2. Dynamic Icons

<?php
namespace App\Livewire;

use Livewire\Component;

class StatusIndicator extends Component
{
    public $status;

    public function render()
    {
        return view('livewire.status-indicator');
    }
}

<!-- resources/views/livewire/status-indicator.blade.php -->
<div class="flex items-center space-x-2">
    @if($status === 'online')
        <x-bx-check-circle class="w-5 h-5 text-green-500" />
        <span class="text-green-500">Online</span>
    @elseif($status === 'offline')
        <x-bx-x-circle class="w-5 h-5 text-red-500" />
        <span class="text-red-500">Offline</span>
    @else
        <x-bx-time class="w-5 h-5 text-yellow-500" />
        <span class="text-yellow-500">Away</span>
    @endif
</div>

3. Interactive Icons

<div class="action-buttons">
    <button wire:click="edit" class="btn btn-outline-primary">
        <x-bx-edit class="w-4 h-4" />
        Edit
    </button>

    <button wire:click="delete" class="btn btn-outline-danger">
        <x-bx-trash class="w-4 h-4" />
        Delete
    </button>

    <button wire:click="share" class="btn btn-outline-secondary">
        <x-bx-share class="w-4 h-4" />
        Share
    </button>
</div>

Custom HUD SVGs

UltraViolet includes custom HUD-style SVG elements for creating futuristic interfaces.

HUD Divider Elements

1. Basic HUD Divider

<!-- resources/views/components/hud/divider.blade.php -->
<div class="hud-divider">
    <img src="{{ asset('images/hud-divider-line-2.svg') }}" alt="HUD Divider" class="w-full">
</div>

2. Animated HUD Divider

<div class="hud-divider-animated">
    <svg viewBox="0 0 934.64 62.7" class="w-full">
        <path d="M616.6,34.13H596.91L577.49,53.55H523.66v1.29H576.2l-5.28,5.28H363.72l-5.28-5.28H411V53.55H357.15L337.73,34.13H318.05l-12.2-12.19h-197v1.29H305.32l10.9,10.9H274.09v2.58H318.8l18.13,18.13h17.86l7.86,7.86H572l7.86-7.86h17.86l18.13-18.13h44.71V34.13H618.42l10.9-10.9H825.75V21.94h-197Z" 
              fill="currentColor" 
              class="hud-path">
        </path>
    </svg>
</div>

<style>
.hud-divider-animated .hud-path {
    stroke: #00ffff;
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: hud-draw 2s ease-in-out forwards;
}

@keyframes hud-draw {
    to {
        stroke-dashoffset: 0;
    }
}
</style>

3. HUD Bar Elements

<!-- Top bar with chevron -->
<div class="hud-bar-top">
    <img src="{{ asset('images/hud/bar-top-chevron.svg') }}" alt="HUD Top Bar" class="w-full">
</div>

<!-- Bottom bar -->
<div class="hud-bar-bottom">
    <img src="{{ asset('images/hud/bar-btm.svg') }}" alt="HUD Bottom Bar" class="w-full">
</div>

<!-- Animated bar -->
<div class="hud-bar-animated">
    <svg viewBox="0 0 965.96 81.69" class="w-full">
        <!-- Bar content -->
    </svg>
</div>

HUD Component Examples

1. HUD Card with Divider

<div class="hud-card">
    <div class="hud-header">
        <h3 class="hud-title">System Status</h3>
        <div class="hud-divider">
            <img src="{{ asset('images/hud/hud-divider-thin.svg') }}" alt="Divider">
        </div>
    </div>

    <div class="hud-content">
        <div class="status-item">
            <x-bx-check-circle class="w-5 h-5 text-green-400" />
            <span>All Systems Operational</span>
        </div>
    </div>
</div>

2. HUD Navigation

<nav class="hud-nav">
    <div class="hud-nav-item">
        <x-bx-home class="w-6 h-6" />
        <span>Dashboard</span>
    </div>

    <div class="hud-divider-vertical">
        <img src="{{ asset('images/hud/hud-divider-line-2.svg') }}" alt="Divider">
    </div>

    <div class="hud-nav-item">
        <x-bx-user class="w-6 h-6" />
        <span>Users</span>
    </div>
</nav>

Example Icons

UltraViolet includes a collection of example icons for various use cases.

Emoji Icons

<!-- Happy expressions -->
<img src="{{ asset('images/icons/emo-happy.svg') }}" alt="Happy" class="w-6 h-6">
<img src="{{ asset('images/icons/emo-laugh.svg') }}" alt="Laugh" class="w-6 h-6">
<img src="{{ asset('images/icons/emo-grin.svg') }}" alt="Grin" class="w-6 h-6">

<!-- Reactions -->
<img src="{{ asset('images/icons/emo-thumbsup.svg') }}" alt="Thumbs Up" class="w-6 h-6">
<img src="{{ asset('images/icons/emo-heart.svg') }}" alt="Heart" class="w-6 h-6">
<img src="{{ asset('images/icons/emo-star.svg') }}" alt="Star" class="w-6 h-6">

UI Icons

<!-- Navigation -->
<img src="{{ asset('images/icons/nav-menu.svg') }}" alt="Menu" class="w-6 h-6">
<img src="{{ asset('images/icons/nav-close.svg') }}" alt="Close" class="w-6 h-6">
<img src="{{ asset('images/icons/nav-arrow.svg') }}" alt="Arrow" class="w-6 h-6">

<!-- Actions -->
<img src="{{ asset('images/icons/action-edit.svg') }}" alt="Edit" class="w-6 h-6">
<img src="{{ asset('images/icons/action-delete.svg') }}" alt="Delete" class="w-6 h-6">
<img src="{{ asset('images/icons/action-save.svg') }}" alt="Save" class="w-6 h-6">

Advanced Usage

1. Icon Components

Create reusable icon components:

<!-- resources/views/components/icon.blade.php -->
@props(['name', 'size' => 'w-6 h-6', 'class' => ''])

@if($name === 'home')
    <x-bx-home class="{{ $size }} {{ $class }}" />
@elseif($name === 'user')
    <x-bx-user class="{{ $size }} {{ $class }}" />
@elseif($name === 'settings')
    <x-bx-settings class="{{ $size }} {{ $class }}" />
@else
    <x-bx-question-mark class="{{ $size }} {{ $class }}" />
@endif

Usage:

<x-icon name="home" size="w-8 h-8" class="text-blue-500" />
<x-icon name="user" size="w-5 h-5" class="text-gray-500" />

2. Dynamic Icon Loading

<?php
namespace App\Livewire;

use Livewire\Component;

class DynamicIcon extends Component
{
    public $iconName = 'home';
    public $iconSize = 'w-6 h-6';
    public $iconColor = 'text-blue-500';

    public function changeIcon($name)
    {
        $this->iconName = $name;
    }

    public function render()
    {
        return view('livewire.dynamic-icon');
    }
}

<!-- resources/views/livewire/dynamic-icon.blade.php -->
<div class="dynamic-icon-demo">
    <div class="icon-display">
        @if($iconName === 'home')
            <x-bx-home class="{{ $iconSize }} {{ $iconColor }}" />
        @elseif($iconName === 'user')
            <x-bx-user class="{{ $iconSize }} {{ $iconColor }}" />
        @elseif($iconName === 'settings')
            <x-bx-settings class="{{ $iconSize }} {{ $iconColor }}" />
        @endif
    </div>

    <div class="icon-controls">
        <button wire:click="changeIcon('home')" class="btn btn-sm">Home</button>
        <button wire:click="changeIcon('user')" class="btn btn-sm">User</button>
        <button wire:click="changeIcon('settings')" class="btn btn-sm">Settings</button>
    </div>
</div>

3. Icon Animations

<div class="animated-icon">
    <x-bx-heart class="w-8 h-8 text-red-500 heart-beat" />
</div>

<style>
.heart-beat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.animated-icon:hover .heart-beat {
    animation-duration: 0.5s;
}
</style>

4. Icon with Loading States

<button wire:click="save" class="btn btn-primary">
    <span wire:loading.remove wire:target="save">
        <x-bx-save class="w-4 h-4" />
        Save
    </span>
    <span wire:loading wire:target="save">
        <x-bx-loader class="w-4 h-4 animate-spin" />
        Saving...
    </span>
</button>

Performance Tips

1. Icon Caching

// In your service provider
public function boot()
{
    // Cache frequently used icons
    Blade::directive('cachedIcon', function ($expression) {
        return "<?php echo cache()->remember('icon-' . md5($expression), 3600, function() use ($expression) { return app('blade-icons')->render($expression); }); ?>";
    });
}

2. Lazy Loading

<!-- Load icons only when needed -->
<div x-data="{ showIcons: false }">
    <button @click="showIcons = true">Show Icons</button>

    <div x-show="showIcons">
        <x-bx-home class="w-6 h-6" />
        <x-bx-user class="w-6 h-6" />
        <x-bx-settings class="w-6 h-6" />
    </div>
</div>

3. Icon Sprites

<!-- Create an icon sprite for better performance -->
<svg style="display: none;">
    <defs>
        <symbol id="icon-home" viewBox="0 0 24 24">
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
        </symbol>
        <symbol id="icon-user" viewBox="0 0 24 24">
            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
        </symbol>
    </defs>
</svg>

<!-- Use the sprite -->
<svg class="w-6 h-6">
    <use href="#icon-home"></use>
</svg>

Accessibility

1. Proper ARIA Labels

<x-bx-home class="w-6 h-6" aria-label="Home page" />
<x-bx-user class="w-6 h-6" aria-label="User profile" />
<x-bx-settings class="w-6 h-6" aria-label="Settings" />

2. Screen Reader Support

<button class="btn btn-icon" aria-label="Delete item">
    <x-bx-trash class="w-5 h-5" />
    <span class="sr-only">Delete</span>
</button>

3. Focus States

<style>
.btn-icon:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.btn-icon:focus svg {
    color: #3b82f6;
}
</style>

Troubleshooting

1. Icons Not Showing

# Clear view cache
php artisan view:clear

# Clear config cache
php artisan config:clear

# Publish icon sets
php artisan vendor:publish --tag=blade-icons

2. Custom Icons Not Working

// In your service provider
public function boot()
{
    // Register custom icon sets
    $this->app['blade-icons']->registerIconSet('custom', [
        'path' => resource_path('svg/custom'),
        'prefix' => 'custom',
    ]);
}

3. Performance Issues

# Optimize autoloader
composer dump-autoload --optimize

# Clear all caches
php artisan optimize:clear

Resources

Blade Icons Documentation: blade-ui-kit.com/blade-icons
Boxicons Website: boxicons.com
Heroicons: heroicons.com
Material Design Icons: fonts.google.com/icons

Summary

Key Takeaways:

✅ Use Blade Icons for consistent SVG icon management
✅ Leverage the 84+ included icon sets
✅ Customize icons with Tailwind CSS classes
✅ Use HUD SVGs for futuristic interfaces
✅ Implement proper accessibility practices
✅ Optimize performance with caching and sprites
✅ Create reusable icon components

Remember: Icons enhance UX when used thoughtfully. Choose appropriate sizes, colors, and provide proper accessibility labels.

Ready to iconify your app? Start with the [Components Guide]({{ route('docs.show', 'livewire/components') }}) to see icons in action! 🎨

Documentation

Getting Started

Authentication

Livewire

Dashboard & Widgets

Applications

UI Components

Data Visualization

E-commerce

Job Board

Cryptocurrency

Advanced

SVG Icons & Blade Icons

SVG Icons & Blade Icons

Overview

What's Included

1. Blade Icons Package

2. Custom HUD SVGs

3. Example Icons

Blade Icons Package

Installation & Setup

Basic Usage

1. Using Boxicons

2. Available Icon Sets

Icon Set Examples

Boxicons (Included)

Heroicons

Material Design Icons

Styling Icons

1. Size Classes

2. Color Classes

3. Custom CSS

In Livewire Components

1. Basic Component Usage

2. Dynamic Icons

3. Interactive Icons

Custom HUD SVGs

HUD Divider Elements

1. Basic HUD Divider

2. Animated HUD Divider

3. HUD Bar Elements

HUD Component Examples

1. HUD Card with Divider

2. HUD Navigation

Example Icons

Emoji Icons

UI Icons

Advanced Usage

1. Icon Components

2. Dynamic Icon Loading

3. Icon Animations

4. Icon with Loading States

Performance Tips

1. Icon Caching

2. Lazy Loading

3. Icon Sprites

Accessibility

1. Proper ARIA Labels

2. Screen Reader Support

3. Focus States

Troubleshooting

1. Icons Not Showing

2. Custom Icons Not Working

3. Performance Issues

Resources

Summary