Blade Lineicons Laravel Package

Getting Started

datlechin/blade-lineicons is a thin Blade wrapper around the LineIcons SVG set — it ships the icon files and exposes them as Blade components so you stop copy-pasting <svg> markup into your views.

Minimal setup:

composer require datlechin/blade-lineicons

Laravel package auto-discovery means there is normally no provider registration or config/app.php edit. After install, render an icon directly in any Blade view:

<x-lineicons name="home" />

Where to look first:

1. The package README on GitHub — it lists the component tag and the supported attributes. Read this before writing markup; it is short and it is the source of truth for prop names.
2. vendor/datlechin/blade-lineicons/ — the SVG sources live here. This is the definitive list of valid icon names, more reliable than any docs page.
3. lineicons.com — the upstream gallery. Browse there to pick an icon, then copy the name verbatim.

First use case: swapping a mixed bag of emoji, Heroicons, and hand-rolled SVG in a nav or button set for one consistent stroke-based icon family. Start with a single component (a sidebar nav) so you can validate sizing and colour inheritance before rolling it out everywhere.

Implementation Patterns

Baseline rendering with Tailwind. LineIcons are stroke-based, so the practical pattern is to let the SVG inherit colour and control the box with utility classes:

<x-lineicons name="settings" class="w-5 h-5 text-gray-500" />

If the component merges $attributes onto the root <svg> (check the README), arbitrary attributes — aria-hidden, data-*, Alpine bindings — pass straight through. That makes it a drop-in inside existing markup.

Wrap it once, use it everywhere. The single highest-value move is your own thin component that fixes a default size and enforces accessibility:

{{-- resources/views/components/icon.blade.php --}}
@props(['name', 'size' => 'w-5 h-5'])

<x-lineicons
    name="{{ $name }}"
    class="{{ $size }}"
    {{ $attributes->merge(['aria-hidden' => 'true']) }}
/>

Now an icon-set swap later is a one-file change instead of a grep across resources/views.

Data-driven icon names. Icons chosen from a DB column (menu items, category badges, feature flags) work fine, but sanitise at the boundary. Store the validated name, not raw user input:

@if (in_array($item->icon, config('icons.allowed'), true))
    <x-icon :name="$item->icon" />
@endif

Compose with buttons and links. Because the SVG is inline, it inherits currentColor and works inside hover/focus states without extra wiring:

<x-app-button>
    <x-icon name="plus" class="w-4 h-4 mr-2" />
    New project
</x-app-button>

Shorten the prefix if it grates. Blade::componentNamespace() in a service provider lets you alias the vendor namespace so you type <x-icon.home /> instead of the long tag — useful if you have hundreds of call sites.

Gotchas and Tips

Pin the version. This is 0.1.0 — a first tagged release. Expect prop names, the component tag, and the directory layout to move before 1.0. Use "datlechin/blade-lineicons": "0.1.*" in composer.json and read the changelog on every bump rather than floating ^0.1.

Icon names are kebab-case and exact. arrow-right works; arrowRight, ArrowRight, and arrow_right almost certainly do not. A typo commonly renders an empty <svg> with no error — the failure is silent and looks like a CSS problem. When an icon "disappears," verify the name against the vendor directory before debugging anything else.

Missing icons are not fatal by default. Decide deliberately what should happen: throw in local/staging so typos surface, degrade gracefully in production. A small helper or your wrapper component is the right place to enforce that policy.

Style with text-*, not fill-*. LineIcons are stroke icons. Setting fill gives you a filled blob or nothing at all. Use stroke/currentColor semantics — the parent's text colour drives the icon colour, which is exactly what you want for hover and disabled states.

Sizing via classes, not numbers. If the component does not expose a size prop, don't guess one — pass Tailwind width/height utilities. Mixing a size prop with a conflicting class produces whichever wins in the attribute merge, which is easy to misread.

Clear the view cache after upgrades. Blade components are compiled. After a composer update that changes the package's view structure, run php artisan view:clear before concluding the release is broken.

Watch render cost in long lists. Inline SVG is heavier than an icon-font glyph or a sprite reference. Rendering a few hundred icons in a table or a paginated grid is a measurable cost; for hot paths consider caching the rendered markup or switching those spots to an SVG sprite.

Check for publishable views/assets. If the package exposes vendor:publish tags for config or view overrides, publishing them creates a fork you now have to maintain against upstream changes. Only publish what you actually need to modify.