Laravel package · MIT

Laravel Animated Icons

Plug-and-play animated SVG icons for Blade. Hover, click, auto, on-view and manual triggers. No JS build step, one manifest, Livewire-safe.

GitHub Packagist composer require aotr/laravel-animated-icons

One component

Drop it in a Blade view

The package ships the runtime and the manifest. Add one assets component per layout, then use the icon anywhere — including Livewire updates. 

<x-animated-icons-assets />

<x-animated-icon name="sprout" class="h-5 w-5" />

<x-animated-icon name="shield-check" trigger="click" />

Triggers

Five ways to move

Hover

Hover the glyph, or the card around it.

Auto

Plays once when it appears in view.

On view

Scroll it into view; plays once.

Manual

Fire it from any event or Livewire action.

More from the library

user-check
chart-candlestick
circle-question-mark
arrow-right

Any icon, any time

Manual API

Fire an icon from a success handler, a broker callback, a Pusher event, or a Livewire action. 

AnimateIcons.play(
    document.querySelector('[data-animated-icon="handshake"]')
);

document.dispatchEvent(new CustomEvent('animated-icon:play', {
    detail: { name: 'radar' },
}));

Add an icon

From the registry

php artisan animateicons:sync bell-ring
php artisan animateicons:sync wifi chart-line --dry-run

Writes to the generated config; hand-authored icons stay untouched.

Install

Three steps

  1. 1. composer require aotr/laravel-animated-icons
  2. 2. Publish the config (optional).
  3. 3. Add <x-animated-icons-assets /> to your layout.