Blade Laravel Package

Getting Started

Install the icon set with Composer and let Laravel's package discovery register the Blade Icons factory:

composer require codeat3/blade-solar-icons

Publish the config if you need to change defaults (icon path, prefix, and — as of v2.0.1 — the stroke width that is now injected once for every icon):

php artisan vendor:publish --tag=solar-icons-config

The first place to look is config/solar-icons.php. The stroke-width value there is now the single source of truth for the whole set, so it is the first knob to check when icons look too thin or too heavy.

Your first use case is almost always a static Blade component in a layout:

<x-solar-home-linear class="w-5 h-5 text-gray-500" />
<x-solar-user-bold class="w-5 h-5" />

The naming convention is x-solar-{icon}-{style}, where style is one of linear, bold, outline, broken, or bold-duotone. Browse the icon list in the package README or the Solar Icons site to pick names.

Implementation Patterns

Static components for known icons. Prefer <x-solar-*> components whenever the icon name is fixed at compile time. They are resolved through Blade Icons, are cacheable, and avoid runtime string building.

Dynamic icons via the helper. For menus, navigation arrays, or CMS-driven content, use the svg() helper with the full icon name:

@foreach ($navItems as $item)
    <a href="{{ $item['url'] }}" class="flex items-center gap-2">
        {{ svg('solar-' . $item['icon'] . '-linear', 'w-5 h-5') }}
        {{ $item['label'] }}
    </a>
@endforeach

Sizing and colour belong to CSS, not the SVG. Apply Tailwind classes (w-5 h-5) and let currentColor do the work (text-indigo-600). Avoid setting width/height attributes on the component.

Stroke width is a design-system decision. Set it once in config/solar-icons.php and stop overriding it per usage. In v2.0.1 the value is applied a single time at render, so per-icon overrides no longer fight with a baked-in attribute. If you genuinely need a heavier or lighter icon in one place, override with a style or class on the rendered SVG rather than editing config.

Caching in production. Ship a deploy step that warms the icon cache:

php artisan icons:cache

Publishing raw SVGs as assets. If you serve icons directly from public/ (for emails, PDFs, or non-Blade consumers), publish them with the package's asset tag. Be aware these files now contain no stroke-width at all — see the gotcha below.

Gotchas and Tips

v2.0.1 changes rendering for standalone SVGs. Stroke width is no longer baked into each file; it is applied once from package config at component/helper render time. Raw SVGs published to public/ therefore render with the SVG default stroke width (1) when opened or embedded outside Blade. If you were shipping those files to email templates, PDFs, or a JS front-end, set stroke-width explicitly there or regenerate the assets with the width you want.

The duplicate stroke-width attribute is gone. Previously, overriding stroke width on a static <x-solar-*> component or through svg() produced two stroke-width attributes on the element, which is invalid markup and behaved inconsistently across browsers. Code that "worked" by relying on the second attribute winning may now behave differently — audit any place you were overriding width ad hoc.

Config changes need a cache clear. Because the width is resolved once, a stale icon cache or compiled views will keep serving the old value. After editing config/solar-icons.php, run:

php artisan icons:clear && php artisan icons:cache
php artisan view:clear

Runtime config mutation is not reliable. Calling config(['solar-icons.stroke-width' => 1.5]) mid-request may not affect already-resolved icons. Treat the value as boot-time configuration.

Check the prefix before guessing component names. If you customised prefix in config, components are <x-{prefix}-icon-style>; mismatches silently fail as unknown components rather than throwing a helpful error.

Blade Icons caching and svg() share the same registry — if one works and the other doesn't, you are usually looking at a stale cache rather than a bad icon name.

Extension point for custom variants. You can register additional icon paths or a separate set through the Blade Icons factory in a service provider if you need to mix Solar with your own iconography, keeping the same svg() API across the app.