avvertix / materialicons-laravel-bridge
Material Design Icons packaged for easy SVG inlining in Laravel Blade templates
Installs: 8 333
Dependents: 0
Suggesters: 0
Security: 0
Stars: 4
Watchers: 3
Forks: 3
Open Issues: 0
Requires
- php: >=7.2.5
- blade-ui-kit/blade-icons: ^0.4|^0.5
- illuminate/filesystem: ^7.14|8.*
- illuminate/support: ^7.14|8.*
Requires (Dev)
- mockery/mockery: ^1.3
- orchestra/testbench: ^5.0|^6.0
- phpunit/phpunit: ^8.0|^9.0
README
Important
Material Icons Laravel Bridge has been deprecated with 2.1.0 as the last release. There are a number of alternatives based on Blade Icons (Blade UI Kit). Thank you for the support and contributions over the years. The repository will remain open and archived.
Material Icons Laravel Bridge
Easily use Google Material Design SVG icons in Laravel Blade templates.
For a full list of available icons see the SVG directories.
Requirements
- PHP 7.2 or higher
- Laravel 7.14 or higher
blade-ui-kit/blade-icons
Using version
1.x
? Check the upgrade guide.
Installation
You can install this package via Composer by running this command in your terminal in the root of your project:
composer require avvertix/materialicons-laravel-bridge
The service provider
MaterialIcons\MaterialIconsBridgeServiceProvider::class
is automatically registered as part of the Laravel service discovery
Configuration
By default the class icon
is added to the svg
tag when inserted into a page.
You can change this behavior by overriding the configuration using
the config/materialiconset.php
file.
A ready to use configuration file can be inserted in your config directory using
php artisan vendor:publish --provider="MaterialIcons\MaterialIconsBridgeServiceProvider"
You can specify any default CSS classes you'd like to be applied to your icons using the class
option:
<?php return [ // ... 'class' => 'icon', // Add the `icon` class to every SVG icon when rendered // ... ];
You can specify multiple classes by separating them with a space, just like you would in an HTML class attribute.
Usage
Blade directive
To insert an icon in your template use the @materialicon
directive, passing the name of
the material icon set, the name of the icon and optionally any additional classes:
<a href="/settings"> @materialicon('action', 'settings', 'icon-lg') Settings </a>
To add additional attributes to the rendered SVG tag, pass an associative array as the third parameter:
<a href="/settings"> @materialicon('action', 'settings', 'icon-lg', ['alt' => 'Gear icon']) Settings </a>
If you'd like, you can use the materialicon
helper directly. The helper exposes a fluent syntax for setting icon
attributes:
<a href="/settings"> {{ materialicon('actions', 'settings')->alt('Alt text')->dataFoo('bar')->dataBaz() }} Settings </a>
Blade components
All icons are available as Blade components, thanks to Blade Icons
<x-materialicon_toggle-ic_star_half_24px />
The component name format is: package name
materialicon
, the set within the packagetoggle
and the file nameic_star_half_24px
.
You can also pass classes to your icon components:
<x-materialicon_toggle-ic_star_half_24px class="icon-lg"/>
Or any other attributes for that matter:
<x-materialicon_toggle-ic_star_half_24px class="icon-lg" id="settings-icon" style="color: #555" data-baz/>
Helper
If you'd like, you can use the materialicon
helper to expose a fluent syntax for setting SVG attributes:
{{ materialicon('toggle', 'star_half')->id('star-icon')->dataFoo('bar')->dataBaz() }}
Use another icon set
Even if this package makes easy to use Google's Material Design icons, it is not limited to that iconset.
You can still use a different iconset as behind the scenes the blade-ui-kit/blade-icons
package is used.
Please check Blade Icon's documentation for all the configuration options and how to insert icons within your Blade views.
Upgrade
Upgrading from an older version? Check the upgrade guide.
Credits
- The icons comes from the Google Material Design Icons package;
- The package functionality was originally created on top of the great Blade SVG package by Adam Wathan now
handed to Dries Vints as
blade-ui-kit/blade-icons
.