fabioserembe/blade-svg-pro

A Laravel package to convert (massively and recursively) SVG files in a folder into a single or multiple .blade.php file(s).

1.0.6 2025-03-23 11:53 UTC

Requires

• php: ^8.0
• ext-simplexml: *
• illuminate/collections: ^8.0|^9.0|^10.0|^11.0|^12.0
• illuminate/console: ^8.0|^9.0|^10.0|^11.0|^12.0
• illuminate/support: ^8.0|^9.0|^10.0|^11.0|^12.0
• laravel/prompts: *
• spatie/image-optimizer: ^1.0

Requires (Dev)

• phpunit/phpunit: ^9.0

MIT

• Fabio Serembe

• fabioserembe
• blade-svg-pro

README

Simplify the implementation of custom icons and use them in your Laravel project by using TailwindCSS classes for styling.

BladeSVGPro is a package that simplifies the conversion of SVG files into Blade components for Laravel projects. It allows you to convert SVG icons from an input folder into a single or multiple .blade.php files. Additionally, it offers support for custom icons compatible with the Flux package.

Requirements

Ensure you have the following requirements to use BladeSVGPro:

• PHP: ^8.0
• PHP Extension: ext-simplexml
• Laravel core: >= 10.x
• Additional Packages:
  • laravel/prompts: ^0.1.25
  • spatie/image-optimizer: ^1.7

Make sure all required components are correctly installed in your environment to ensure the proper functioning of the package.

Installation

Run the following command to install the package:

composer require fabioserembe/blade-svg-pro --dev

Usage

BladeSVGPro offers a straightforward interface to convert your SVG files:

Basic Usage Example

Run the command and follow the prompts:

php artisan blade-svg-pro:convert

Usage with Parameters

You can specify the input and output directories using the --i and --o options:

php artisan blade-svg-pro:convert --i="path/to/svg/directory" --o="path/to/output/directory"

Available Options

• --i: Specifies the path to the folder containing the SVGs to be converted.
• --o:Specifies the path to the folder where the generated .blade.php files will be saved.
• --flux: Enables support for custom icons compatible with the Flux package.

Flux support

To convert icons into a format compatible with Flux custom icons, use the --flux parameter:

php artisan blade-svg-pro:convert --flux

Note: When using --flux, the output directory is automatically set to resources/views/flux/icon as required by the Flux documentation. If the path does not exist, it will be created automatically.

Converting into Single or Multiple .blade files

When running the command without the --flux option, you will be prompted to choose whether you want to convert the icons into a single file or multiple files:

• Single File: All icons are inserted into one .blade.php file.
• Multiple Files: Each icon is saved in a separate .blade.php file.

Example for Single file conversion

php artisan blade-svg-pro:convert --i="path/to/svg/directory" --o="path/to/output/directory"

Follow the prompts and choose "Single file" when asked.

Example for Multiple file conversion

php artisan blade-svg-pro:convert --i="path/to/svg/directory" --o="path/to/output/directory"

Follow the prompts and choose "Multiple file" when asked.

Output example

Single .blade file

If you choose to convert into a single file, the output will look similar to this:

@props(['name' => null, 'default' => 'size-4'])
@switch($name)
@case('chevron-left')
    <svg xmlns="http://www.w3.org/2000/svg" width="5" height="8.746" viewBox="0 0 5 8.746" {{ $attributes->merge(['class' => $default]) }}>
        <path fill="currentColor" d="m1.507 4.371 3.309-3.307a.625.625 0 0 0-.885-.883L.182 3.928a.624.624 0 0 0-.018.862l3.765 3.773a.625.625 0 1 0 .885-.883Z" />
    </svg>
@break
// More cases...
@endswitch

Use the blade component in a view

Let us assume that we have exported the icons within a blade file named icons located in the views/components directory. Within the view blade, we can use this file generated with:

<x-icons name="chevron-left" />

You can customize the icon by adding your preferred Tailwind classes:

<x-icons name="chevron-left" class="text-red-500 hover:text-blue-500 ..." />

Multiple .blade files

If you choose to convert into multiple files, each icon will have its own .blade.php file.

Example for the chevron-left.blade.php icon

@props(['name' => null, 'default' => 'size-4'])
<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8.746" viewBox="0 0 5 8.746" {{ $attributes->merge(['class' => $default]) }}>
    <path fill="currentColor" d="M1.507 4.371L4.816 1.064a.625.625 0 0 0-.885-.883L.182 3.928a.624.624 0 0 0-.018.862l3.765 3.773a.625.625 0 1 0 .885-.883Z"/>
</svg>

Using blade component in a view

Let us assume that we have exported the blade files in the views/components/icons directory.

<x-icons.chevron-left />

You can customize the icon by adding your preferred Tailwind classes:

<x-icons.chevron-left class="text-red-500 hover:text-blue-500 ..." />

Flux support

When you use the --flux option, the icons are generated in a format compatible with the Flux package.

Example of a generated file

@php $attributes = $unescapedForwardedAttributes ?? $attributes; @endphp

@props([
    'variant' => 'outline',
])

@php
$classes = Flux::classes('shrink-0')
    ->add(match($variant) {
        'outline' => '[:where(&)]:size-6',
        'solid' => '[:where(&)]:size-6',
        'mini' => '[:where(&)]:size-5',
        'micro' => '[:where(&)]:size-4',
    });
@endphp

<svg xmlns="http://www.w3.org/2000/svg" width="5" height="8.746" viewBox="0 0 5 8.746" {{ $attributes->class($classes) }} data-flux-icon aria-hidden="true">
    <path fill="currentColor" d="M1.507 4.371L4.816 1.064a.625.625 0 0 0-.885-.883L.182 3.928a.624.624 0 0 0-.018.862l3.765 3.773a.625.625 0 1 0 .885-.883Z"/>
</svg>

Using the blade component with Flux in a view

<flux:icon.chevron-left variant="solid" class="text-red-500 hover:text-blue-500 ..." />

Currently supported icon types

• Linear
• Bold
• Duotone
• Bulk

Issues and bugs

Please report any issues or bugs in the issues section.

Suggestions

If you have any suggestions, write to me at [e-mail].

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Credits

• Fabio Serembe

Do you like this package?

If you like this package and find it useful, please Buy me a beer 🍺

Thanks for your support! 🤙🏻