BladeSVGPro

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 [email protected].

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 [email protected] 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! 🤙🏻