Laravel Blade SVG is a package that enables you to easily include and manipulate SVG files directly within your Blade templates. This package simplifies the process of using SVG images in your Laravel applications by providing a clean and expressive API.
Key Features
- Simplified SVG Inclusion: Load SVG files directly in your Blade views without additional HTML.
- Inline SVG Rendering: Allows for the SVG content to be included inline, enabling easy manipulation with CSS and JavaScript.
- Configuration Options: Customize how SVGs are included and rendered.
- Cache Support: Optionally cache the rendered SVGs for improved performance.
Installation
You can install the package via Composer:
|
1 |
composer require blade-ui-kit/blade-svg |
Configuration
After installation, you may publish the configuration file to customize settings as needed:
|
1 |
php artisan vendor:publish --provider="BladeUIKit\BladeSvg\BladeSvgServiceProvider" |
This command will create a configuration file at config/blade-svg.php, where you can customize various settings, such as the SVG directory.
Using SVGs in Blade Templates
Basic Usage
Once the package is installed, you can include SVG files in your Blade templates using the @svg directive:
|
1 |
@svg('path.to.your.svg') |
For example, if you have an SVG file located at resources/svg/logo.svg, you can include it like this:
|
1 |
@svg('logo') |
Passing Attributes
You can also pass attributes to the SVG to customize its appearance, such as width, height, and classes:
|
1 |
@svg('logo', ['class' => 'my-custom-class', 'width' => '100', 'height' => '100']) |
This will add the specified attributes to the SVG element, allowing you to style or resize it as needed.
Example of Inline SVG Rendering
Here’s a simple example of how to include an SVG and apply styles:
|
1 2 3 |
<div class="icon-container"> @svg('logo', ['class' => 'icon', 'width' => '150', 'height' => '150']) </div> |
In your CSS, you could then target the SVG:
|
1 2 3 4 5 6 7 8 |
.icon { fill: #3490dc; /* Change the fill color */ transition: transform 0.2s; } .icon:hover { transform: scale(1.1); /* Scale on hover */ } |
Caching SVGs
To improve performance, you can enable caching for your SVGs in the configuration file. By default, caching is disabled. You can enable it by setting cache to true in config/blade-svg.php.
Conclusion
Laravel Blade SVG makes it easy to work with SVG images in your Laravel applications, providing a straightforward way to include, manipulate, and customize SVGs directly in your Blade templates. This package enhances the flexibility and maintainability of your front-end assets.