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.0.9.1(3mo ago)1429MITPHPPHP ^8.1 Since Oct 10Pushed 3mo 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 1mo ago READMEChangelog (10)Dependencies (6)Versions (13)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.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 ------------ [](#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 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). --- #### 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 ``` --- #### 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) ``` ``` --- ### Smart White Color Preservation [](#smart-white-color-preservation) BladeSVGPro automatically detects and preserves white colors used for contrast in solid icons (e.g., checkmarks on shields, crosses on badges). **How it works:** - The converter automatically scans SVG files for white colors (`white`, `#fff`, `#ffffff`) - When detected, these colors are preserved instead of being converted to `currentColor` - This ensures solid icons with contrast elements display correctly **Example:** ``` ``` After conversion, the white stroke is automatically preserved: ``` ``` **Manual override (optional):**If you need to force preservation of white colors, use the `--preserve-contrast` flag: ``` php artisan blade-svg-pro:convert --inline --flux --preserve-contrast ``` **Note:** This feature works automatically for both file-based and inline conversions. --- ### Currently supported icon types [](#currently-supported-icon-types) - Linear - Bold - Duotone - Bulk - Solid (with automatic white contrast preservation) --- 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 43 — FairBetter than 91% of packages Maintenance81 Actively maintained with recent releases Popularity17 Limited adoption so far Community9 Small or concentrated contributor base Maturity55 Maturing project, gaining track record Bus Factor1 Top contributor holds 96.8% 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 ~48 days Recently: every ~78 days Total 11 Last Release 102d 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 (30 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 TestsPHPUnit ### 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 [tightenco/jigsaw Simple static sites with Laravel's Blade. 2.2k438.5k29](/packages/tightenco-jigsaw)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[craftcms/cms Craft CMS 3.6k3.6M2.6k](/packages/craftcms-cms)[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.4k10.6M274](/packages/laravel-boost)[laravel-zero/framework The Laravel Zero Framework. 3371.4M369](/packages/laravel-zero-framework)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)