Blade Memory Icons Laravel Package

Getting Started

Install (one command, no config):

composer require codeat3/blade-memory-icons

Auto-discovery registers the service provider. There is no publish step, no config file, no asset build.

Where to look first:

1. vendor/codeat3/blade-memory-icons/ — inspect the generated Blade component classes and the bundled SVG source directory. This tells you (a) the real component prefix, (b) the exact glyph inventory, and (c) the upstream icon version. Do this before writing any markup; the README is thin and the component prefix must be confirmed, not assumed.
2. composer.lock — confirm the resolved illuminate/* and blade-ui-kit/blade-icons versions. blade-icons is the transitive engine doing the rendering and caching.
3. The upstream Memory Icons set — this is the go/no-go. Grep your templates for the top 20–30 glyphs you actually ship and check each one exists.

First use case: pick one low-traffic internal view (admin nav chrome, a settings page header) and render a single icon:

<x-memory-icon name="home" class="w-5 h-5 text-gray-500" />

Confirm the resolved prefix first — some codeat3 packages expose <x-memory-icon-{name} /> (name in the tag) rather than name="...". Check the component classes, then standardize on whichever form the package actually ships.

First hour checklist:

• Verify the icon renders as inline <svg> in the page source (curl the page, not just eyeball it).
• Confirm attributes pass through: class, width, height, fill, stroke, aria-hidden.
• Snapshot the rendered markup — this is your vendor-and-exit artifact later.
• Note the SVG license separately; the package is MIT but the icon set's terms are separate and may carry attribution obligations.

Implementation Patterns

1. Direct component usage with utility classes

Pass styling via standard HTML attributes; sizing and color through Tailwind or inline styles:

<x-memory-icon name="user" class="size-4 text-slate-600" />
<x-memory-icon name="trash" class="size-4 text-red-600" aria-hidden="true" />

2. Wrap it in your own semantic component (recommended for design systems)

The real value of adopting this package is one greppable namespace. Don't let <x-memory-icon> leak into 200 templates — wrap it so you own the surface area:

{{-- resources/views/components/icon.blade.php --}}
@props(['name', 'size' => 'md', 'label' => null])

@php
    $sizes = ['sm' => 'size-4', 'md' => 'size-5', 'lg' => 'size-6'];
@endphp

<x-memory-icon
    :name="$name"
    {{ $attributes->merge(['class' => $sizes[$size]]) }}
    @if($label)
        role="img" aria-label="{{ $label }}"
    @else
        aria-hidden="true"
    @endif
/>

Now a future swap to a different icon set is a one-file change instead of a codebase-wide find-and-replace.

3. Decorative vs. labeled icons — decide once, enforce everywhere

Inline SVG has no implicit accessibility semantics. Convention:

• Decorative (icon next to visible text, e.g. a "Delete" button with a trash glyph): aria-hidden="true", no label. The button's text does the work.
• Meaningful (icon-only button, status indicator): role="img" + aria-label, or visually hidden text. Never rely on the glyph alone.

Bake this into the wrapper above so it can't be forgotten per-call-site.

4. Icon-in-button with @props and attribute merging

{{-- resources/views/components/icon-button.blade.php --}}
@props(['icon', 'label', 'variant' => 'ghost'])

<button type="button"
        class="inline-flex items-center gap-2 rounded {{ $variant === 'danger' ? 'text-red-600' : 'text-slate-700' }}"
        {{ $attributes }}>
    <x-memory-icon :name="$icon" class="size-4" aria-hidden="true" />
    <span>{{ $label }}</span>
</button>

5. Data-driven status glyphs

Because components are just Blade, mapping an enum to an icon is plain PHP:

@php
    $statusIcon = match($order->status) {
        'pending'   => 'clock',
        'shipped'   => 'truck',
        'cancelled' => 'x-circle',
        default     => 'circle',
    };
@endphp

<x-icon :name="$statusIcon" size="sm" :label="$order->status_label" />

6. Icon-dense views: prefer symbol references over repeated inline SVG

Repeating the same inline <svg> 40 times in a table inflates HTML and defeats shared caching. If you have a repeating icon (row action, sort caret), define a <symbol> once per layout and <use> it — or limit the icon count per view. This is the one rendering-cost lever you have; the package itself has no sprite mode.

7. Livewire / Octane

Components are stateless and render to a string. Nothing to consider for Octane workers. In Livewire, use icons normally inside components — they re-render with the component, which is fine, but be aware icon-dense Livewire views pay the inline-SVG cost on every morph.

8. Integration with a visual-regression gate

Add a smoke test asserting non-empty markup on key pages, because a missing icon can fail silently (empty element) rather than loudly:

it('renders dashboard icons', function () {
    $this->get('/dashboard')
        ->assertSee('<svg', false)
        ->assertDontSee('<x-memory-icon', false); // unresolved component leak
});

Gotchas and Tips

The prefix is not guaranteed. The package follows the blade-icons component convention, but <x-memory-icon name="..." /> vs. <x-memory-icon-{name} /> differ between packages in this family. Confirm by listing the generated component classes in vendor/, not by assuming. Getting this wrong is a 10-minute debugging session that produces Unable to locate a class or view for component.

"Laravel 13 compatible" (1.2.0) means constraints permit installation, not that it's CI-verified. The release widens illuminate/* to admit ^13.0. That's a forward-compatibility widening with no behavioral change — good news for your upgrade sequencing, but don't treat it as a tested guarantee. Resolve dependencies against the target Laravel version in a branch before trusting it.

Constraint drift is the likeliest incident. These packages declare broad illuminate/support ranges. The most probable operational event is a composer resolution failure after a framework upgrade — caught in CI, not production. Pin to a caret range ("^1.2") and let Renovate/Dependabot surface bumps; review them, since compat-only releases are the norm. Do not float to *.

Conflict risk with other blade-icons consumers. If another package pins blade-ui-kit/blade-icons tightly, you can get a resolution deadlock. Check composer why blade-ui-kit/blade-icons when things go sideways.

Missing icon can fail silently. An unresolved component throws, but a resolved component with an unknown name may render an empty or broken element depending on the engine's behavior. Don't assume a green page means the icon is there — assert on rendered <svg> markup in a smoke test.

Sizing: the SVG's own dimensions may win. Icons typically carry width/height attributes in the source. Tailwind size-* classes set CSS dimensions, which override the attributes, but if you're using width="16" HTML attributes you may fight the intrinsic size. Prefer CSS classes and add fill="currentColor"/stroke checks so text-* color utilities actually apply — some icons are fill-based, others stroke-based, and mixing them makes text-red-600 look wrong.

Accessibility is entirely your responsibility. No defaults are provided beyond whatever the SVG source carries. Establish the decorative-vs-labeled convention early (see above) and enforce it in your wrapper component, or you will end up with a mix and an a11y audit finding later.

Page weight on icon-dense pages. Each icon is inlined SVG. On high-traffic, icon-heavy views (data tables, dashboards), this inflates HTML and prevents browser caching of a shared sprite. Mitigate: cap icons per view, prefer <use>/symbols for repeats, ensure gzip/brotli is on. This is a rendering-cost risk, not a stability risk.

Single-maintainer, upstream-driven cadence. Support latency and Laravel-major cadence are correlated across the whole codeat3 icon-package family. Treat as a cosmetic dependency, not critical infrastructure. Record the fallback in your dependency register.

The exit hatch is genuinely cheap — use it as your safety net. Because components compile to inline SVG, you can snapshot the rendered markup or the package's SVG source directory and vendor it if the package goes stale or you want zero dependency risk. Do this snapshot once during the pilot; it costs minutes and makes the dependency reversible.

Don't adopt if your glyph coverage fails. Memory Icons is a narrow, opinionated set. If your top 20–30 needed glyphs aren't covered, mixing sets costs you visual consistency — more than the package saves. Check coverage before you check the license.

Don't adopt for Inertia/SPA client-rendered frontends. Server-side Blade components deliver no value there and create a second, divergent icon source of truth. Likewise skip for brand marks, illustrations, duotone/animated families, or data-viz glyphs.

Confirm the SVG license separately. The package is MIT; the redistributed icon set has its own terms, which may include attribution obligations that survive into your compiled inline markup. Read the upstream license before shipping.