PHPackages                             fabioserembe/blade-svg-pro - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. fabioserembe/blade-svg-pro

ActiveLibrary[Templating & Views](/categories/templating)

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.2.3(4w ago)1826MITPHPPHP ^8.1

Since Oct 10Pushed 4w ago1 watchersCompare

[ Source](https://github.com/fabioserembe/blade-svg-pro)[ Packagist](https://packagist.org/packages/fabioserembe/blade-svg-pro)[ Docs](https://github.com/fabioserembe/blade-svg-pro)[ RSS](/packages/fabioserembe-blade-svg-pro/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (10)Dependencies (24)Versions (19)Used By (0)

BladeSVGPro
-----------

[](#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
------------

[](#requirements)

Ensure you have the following requirements to use BladeSVGPro:

- PHP: ^8.1
- PHP Extensions: `ext-dom`, `ext-simplexml`, `ext-libxml`
- Laravel: ^8.0 | ^9.0 | ^10.0 | ^11.0 | ^12.0 | ^13.0
- Additional Packages:
    - `laravel/prompts`: ^0.1.25 | ^0.2.0 | ^0.3.0
    - `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
------------

[](#installation)

Run the following command to install the package:

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

Usage
-----

[](#usage)

BladeSVGPro offers a straightforward interface to convert your SVG files:

#### Basic Usage Example

[](#basic-usage-example)

Run the command and follow the prompts:

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

#### Usage with Parameters

[](#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

[](#available-options)

- `--i`: Specifies the path to the folder **or a single `.svg` file** containing the SVGs to be converted (or SVG code when used with `--inline`).
- `--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.
- `--inline`: Enables inline SVG conversion mode, allowing you to paste SVG code directly instead of using files.
- `--preserve-contrast`: Manually forces preservation of white colors for contrast elements (auto-detected by default).
- `--prefix`: Adds a prefix to all generated icon names (e.g. `--prefix=brandname` will generate `brandname-icon-name.blade.php`).
- `--name`: Sets the icon name for `--inline` mode, and the output file name in single-file mode (skips the related prompt).
- `--mode`: Sets the output to `single` or `multiple` (skips the "single or multiple?" prompt). Ignored with `--flux`, which is always multiple.

#### Non-interactive usage (CI / scripts / AI agents)

[](#non-interactive-usage-ci--scripts--ai-agents)

Every option you omit becomes an interactive prompt. To run the command unattended, pass the relevant options and add Laravel's global `--no-interaction` flag, which resolves omitted prompts to sensible defaults (no prefix, `--mode=multiple`). Any required value still missing (`--i`, `--o` without `--flux`, or `--name` for inline/single-file) makes the command fail with a clear error instead of waiting for input.

```
# Convert a folder into multiple components, no prompts
php artisan blade-svg-pro:convert --i="resources/svg" --o="resources/views/components/icons" --mode=multiple --no-interaction

# Flux icons, no prompts
php artisan blade-svg-pro:convert --flux --i="resources/svg" --no-interaction

# Inline SVG, no prompts
php artisan blade-svg-pro:convert --inline --i='...' --o="resources/views/components/icons" --name=my-icon --no-interaction
```

---

#### Inline SVG Conversion

[](#inline-svg-conversion)

Convert SVG code directly without needing a file by using the `--inline` option:

```
php artisan blade-svg-pro:convert --inline
```

When prompted, paste your SVG code and press **Ctrl+D** to finish.

You can also pass the SVG code directly via the `--i` option:

```
php artisan blade-svg-pro:convert --inline --i='...'
```

**Features**:

- Works with both standard and `--flux` modes
- Automatically normalizes viewBox to 24x24 standard size
- Supports multi-line SVG code via textarea prompt
- Applies the same optimizations and transformations as file-based conversion

**Example with Flux**:

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

---

#### Icon Prefix

[](#icon-prefix)

You can add a prefix to all generated icon names using the `--prefix` option. This is useful when you want to namespace your icons to avoid conflicts or to organize them by brand/project.

```
php artisan blade-svg-pro:convert --prefix=brandname
```

If not provided via the command line, you will be prompted to enter a prefix interactively (you can leave it empty to skip).

**Examples:**

- `arrow-left.svg` with `--prefix=brandname` → `brandname-arrow-left.blade.php`
- Works with all modes: standard, `--flux`, `--inline`, single and multiple file conversion

```
# With Flux
php artisan blade-svg-pro:convert --flux --prefix=brandname

# With inline conversion
php artisan blade-svg-pro:convert --inline --prefix=brandname
```

---

#### Flux support

[](#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](https://fluxui.dev/components/icon#custom-icons). If the path does not exist, it will be created automatically.

---

#### Converting into Single or Multiple .blade files

[](#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

[](#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

[](#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

[](#output-example)

#### Single .blade file

[](#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')
    merge(['class' => $default]) }}>

@break
// More cases...
@endswitch
```

#### Use the blade component in a view

[](#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:

```

```

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

```

```

---

#### Multiple .blade files

[](#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

[](#example-for-the-chevron-leftbladephp-icon)

```
@props(['name' => null, 'default' => 'size-4'])
merge(['class' => $default]) }}>

```

#### Using blade component in a view

[](#using-blade-component-in-a-view)

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

```

```

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

```

```

---

### Flux support

[](#flux-support-1)

When you use the `--flux` option, the icons are generated in a format compatible with the [Flux](https://fluxui.dev) package.

#### Example of a generated file

[](#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

class($classes) }} data-flux-icon aria-hidden="true">

```

#### Using the blade component with Flux in a view

[](#using-the-blade-component-with-flux-in-a-view)

```

```

---

### Automatic Color Replacement

[](#automatic-color-replacement)

BladeSVGPro automatically detects the icon type and applies the correct color replacement strategy. **No manual configuration is needed** — the converter analyzes the SVG structure (presence of stroke vs fill, number of distinct colors, presence of opacity) and applies the appropriate rules.

#### Supported icon types

[](#supported-icon-types)

TypeDetectionColor replacement**Linear/Outline**Only strokes, no fills`stroke` → `currentColor`, `fill="none"` preserved**Bold**Same as linear (thicker strokes)Same as linear**Solid**Fill-based, no strokes`fill` → `currentColor`**Solid with contrast**Fill + white elements or `currentColor` elementsBackground → `currentColor`, contrast → `#fff` preserved**Duotone**Elements with partial opacityColors → `currentColor`, existing `opacity` preserved**Bulk**Two distinct fill colors, no opacityPrimary → `currentColor`, secondary → `currentColor` + `opacity="0.4"`#### Automatic contrast preservation

[](#automatic-contrast-preservation)

Solid icons with internal contrast elements are handled automatically in two scenarios:

**1. White elements as contrast** (e.g., white checkmark on dark shield):

```

```

**2. `currentColor` elements as contrast** (e.g., clock hands on colored background):

```

```

#### What gets replaced

[](#what-gets-replaced)

- **All hardcoded colors**: hex (`#fff`, `#000`, `#3B82F6`), named (`white`, `black`, `red`), `rgb()`, `rgba()`
- **Transparent fills preserved**: `fill="none"`, `stroke="none"`, `rgba(...,0)` are never converted
- **Existing opacity preserved**: `opacity` attributes on duotone elements are never overwritten

---

Laravel Boost integration
-------------------------

[](#laravel-boost-integration)

BladeSVGPro ships with [Laravel Boost](https://laravel.com/docs/13.x/boost) resources so AI coding agents (Claude Code, Cursor, Copilot, etc.) know how to use the package correctly.

If your project uses Boost, these resources are published automatically when you run `php artisan boost:install` (or `php artisan boost:update --discover`):

- **AI guideline** (`resources/boost/guidelines/core.blade.php`): loaded upfront, gives the agent a short overview of the package.
- **Agent skill** (`resources/boost/skills/blade-svg-pro/SKILL.md`): loaded on-demand, with the full option list, output modes, Flux usage and color-replacement behavior.

The skill is written to activate when you build a frontend from SVG assets — for example icons exported from Figma or fetched via an MCP server — so the agent converts them with `blade-svg-pro:convert` instead of hand-writing SVG markup.

---

Issues and bugs
---------------

[](#issues-and-bugs)

Please report any issues or bugs in the [issues section](https://github.com/fabioserembe/blade-svg-pro/issues).

Suggestions
-----------

[](#suggestions)

If you have any suggestions, write to me at .

Changelog
---------

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

Contributing
------------

[](#contributing)

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

Security
--------

[](#security)

If you discover any security related issues, please email  instead of using the issue tracker.

Credits
-------

[](#credits)

- [Fabio Serembe](https://github.com/fabioserembe)

Do you like this package?
-------------------------

[](#do-you-like-this-package)

If you like this package and find it useful, please [Buy me a beer 🍺](https://buymeacoffee.com/fabioserembe)

Thanks for your support! 🤙🏻

###  Health Score

48

—

FairBetter than 93% of packages

Maintenance94

Actively maintained with recent releases

Popularity21

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 97.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~37 days

Recently: every ~16 days

Total

17

Last Release

28d ago

PHP version history (2 changes)1.0.0PHP ^8.0

1.0.7PHP ^8.1

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/35957891?v=4)[Fabio Serembe](/maintainers/fabioserembe)[@fabioserembe](https://github.com/fabioserembe)

---

Top Contributors

[![fabioserembe](https://avatars.githubusercontent.com/u/35957891?v=4)](https://github.com/fabioserembe "fabioserembe (38 commits)")[![fabio-algomera](https://avatars.githubusercontent.com/u/102519891?v=4)](https://github.com/fabio-algomera "fabio-algomera (1 commits)")

---

Tags

fabioserembeblade-svg-pro

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/fabioserembe-blade-svg-pro/health.svg)

```
[![Health](https://phpackages.com/badges/fabioserembe-blade-svg-pro/health.svg)](https://phpackages.com/packages/fabioserembe-blade-svg-pro)
```

###  Alternatives

[laravel/ai

The official AI SDK for Laravel.

1.0k3.2M194](/packages/laravel-ai)[craftcms/cms

Craft CMS

3.6k3.6M3.1k](/packages/craftcms-cms)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9762.4M131](/packages/roots-acorn)[illuminate/queue

The Illuminate Queue package.

21332.6M1.6k](/packages/illuminate-queue)[illuminate/console

The Illuminate Console package.

13046.0M6.5k](/packages/illuminate-console)[laravel/boost

Laravel Boost accelerates AI-assisted development by providing the essential context and structure that AI needs to generate high-quality, Laravel-specific code.

3.5k21.5M595](/packages/laravel-boost)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)