blade-ui-kit / blade-icons
A package to easily make use of icons in your Laravel Blade views.
Fund package maintenance!
driesvints
Paypal
Installs: 14 438 792
Dependents: 179
Suggesters: 2
Security: 0
Stars: 2 230
Watchers: 29
Forks: 148
Open Issues: 4
Requires
- php: ^7.4|^8.0
- illuminate/contracts: ^8.0|^9.0|^10.0|^11.0
- illuminate/filesystem: ^8.0|^9.0|^10.0|^11.0
- illuminate/support: ^8.0|^9.0|^10.0|^11.0
- illuminate/view: ^8.0|^9.0|^10.0|^11.0
- symfony/console: ^5.3|^6.0|^7.0
- symfony/finder: ^5.3|^6.0|^7.0
Requires (Dev)
- mockery/mockery: ^1.5.1
- orchestra/testbench: ^6.0|^7.0|^8.0|^9.0
- phpunit/phpunit: ^9.0|^10.5|^11.0
This package is auto-updated.
Last update: 2024-12-17 17:58:02 UTC
README
Blade Icons
A package to easily make use of SVG icons in your Laravel Blade views. Originally "Blade SVG" by Adam Wathan.
Turn...
<!-- camera.svg --> <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/> </svg>
Into...
<x-icon-camera class="w-6 h-6" />
Or into...
@svg('camera', 'w-6 h-6')
Looking for a specific icon? Try our icon search: https://blade-ui-kit.com/blade-icons#search
Any sponsorship to help fund development is greatly appreciated ❤️
Icon Packages
Blade Icons is a base package to make it easy for you to use SVG icons in your app. In addition, there's also quite some third party icon set packages. Thanks to the community for contributing these!
We're not accepting requests to build new icon packages ourselves but you can start building your own.
- Blade Academicons by Swapnil Sarwe
- Blade Akar Icons by Swapnil Sarwe
- Blade Ant Design Icons by Swapnil Sarwe
- Blade Bootstrap Icons by David H. Sianturi
- Blade Boxicons by Dan Pock
- Blade Bytesize Icons by Swapnil Sarwe
- Blade Carbon Icons by Swapnil Sarwe
- Blade Circle Flags by Fahri Meral
- Blade Clarity Icons by Swapnil Sarwe
- Blade Coolicons by Swapnil Sarwe
- Blade CoreUI Icons by Adrián UB
- Blade Country Flags by Stijn Vanouplines
- Blade Cryptocurrency Icons by Swapnil Sarwe
- Blade CSS Icons by khatabWedaa
- Blade Dev Icons by Swapnil Sarwe
- Blade Element Plus Icons by Swapnil Sarwe
- Blade Elusive Icons by Swapnil Sarwe
- Blade Emblemicons by Swapnil Sarwe
- Blade Entypo by Owen Voke
- Blade EOS Icons by Swapnil Sarwe
- Blade Eva Icons by Nehal Hasnayeen
- Blade Evil Icons by Swapnil Sarwe
- Blade Feather Icons by Bruno Falcão
- Blade File Icons by Swapnil Sarwe
- Blade File Type Icons by Brandon Nifong
- Blade FluentUi System Icons by Swapnil Sarwe
- Blade Flowbite Icons by Dominique Thomas
- Blade Font Audio by Swapnil Sarwe
- Blade Font Awesome by Owen Voke
- Blade Fontisto Icons by Swapnil Sarwe
- Blade Fork Awesome by Swapnil Sarwe
- Blade Github Octicons by Tim Joosten
- Blade Google Material Design Icons by Swapnil Sarwe
- Blade Gov Icons by Swapnil Sarwe
- Blade Gravity UI Icons by Swapnil Sarwe
- Blade Grommet Icons by Swapnil Sarwe
- Blade Health Icons by Giulio Troccoli-Allard
- Blade Heroicons by Dries Vints
- Blade Hugeicons by Mustafa Afat
- Blade Humbleicons by Swapnil Sarwe
- Blade IcoMoon Icons by Joe Sylnice
- Blade Icon Park Icons by Swapnil Sarwe
- Blade Iconic Icons by Malik Alleyne-Jones
- Blade Iconoir by Andrei Ioniță
- Blade Iconsax by Saade
- Blade Ikonate Icons by Swapnil Sarwe
- Blade Ionicons by Faisal Ahmed
- Blade Jam Icons by Swapnil Sarwe
- Blade Lets Icons by Mansoor Ahmed
- Blade Line Awesome Icons by Swapnil Sarwe
- Blade Lineicons by Ngô Quốc Đạt
- Blade Lucide Icons by Dan Pock
- Blade Majestic Icons by Swapnil Sarwe
- Blade Maki Icons by Swapnil Sarwe
- Blade Material Design Icons by Postare
- Blade Memory Icons by Swapnil Sarwe
- Blade Microns by Swapnil Sarwe
- Blade Mono Icons by Swapnil Sarwe
- Blade Pepicons by Swapnil Sarwe
- Blade Phosphor icons by Swapnil Sarwe
- Blade Pixelarticons by Swapnil Sarwe
- Blade Polaris Icons by Samoilenko Eduard
- Blade Prime Icons by Swapnil Sarwe
- Blade Radix Icons by Swapnil Sarwe
- Blade Remix Icon by Andrei Ioniță
- Blade RPG Awesome Icons by Swapnil Sarwe
- Blade Simple Icons by Adrián UB
- Blade Simple Line Icons by Swapnil Sarwe
- Blade Solar Icons by Swapnil Sarwe
- Blade System UIcons by Swapnil Sarwe
- Blade Tabler Icons by Ryan Chandler
- Blade Teeny Icons by Swapnil Sarwe
- Blade Typicons by Swapnil Sarwe
- Blade Uiw Icons by Swapnil Sarwe
- Blade Unicons by Swapnil Sarwe
- Blade UntitledUI Icons by Arthur Monney
- Blade Vaadin Icons by Swapnil Sarwe
- Blade VSCode Codicons by Swapnil Sarwe
- Blade Weather Icons by Swapnil Sarwe
- Blade Zondicons by Swapnil Sarwe
Requirements
- PHP 7.4 or higher
- Laravel 8.0 or higher
Installation
Install the package with composer:
composer require blade-ui-kit/blade-icons
Then, publish the configuration and uncomment the default
icon set:
php artisan vendor:publish --tag=blade-icons
Make sure that the path defined for this icon set exists. By default it's resources/svg
. Your SVG icons will need to be placed in this directory.
Upgrading
Please refer to the upgrade guide
when upgrading the library.
Caching
When working with Blade Icons, and third party icon sets in particular, you'll often be working with large icon sets. This can slow down your app tremendously, especially when making use of Blade components. To solve this issue, Blade Icons ships with caching support. To enable icon caching you can run the following command:
php artisan icons:cache
This will create a blade-icons.php
file in bootstrap/cache
similar to the packages.php
cached file. It'll contain a manifest of all known sets and icons with their path locations.
Caching icons means you won't be able to add extra icons, change paths for icon sets or install/remove icon packages. To do so make sure you first clear the icons cache and cache after you've made these changes:
php artisan icons:clear
It's a good idea to add the icons:cache
command as part of your deployment pipeline and always cache icons in production.
Alternatively, you may choose to disable Blade components entirely.
Also, when adding new icons, renaming directories in your icon paths, it's always a good idea to clear your views before refreshing the page:
php artisan view:clear
Configuration
Defining Sets
Blade Icons support multiple sets. You can define these by passing a key/value combination in the blade-icons.php
config file's sets
setting:
<?php return [ 'sets' => [ 'default' => [ 'path' => 'resources/svg', ], ], ];
Feel free to add as many sets as you wish. Blade Icons ships with a default
set for your app which you may adjust to your liking.
Icon Paths
If you wanted to add icons from a different directory in your app, say resources/images/svg
, you can set it like this:
<?php return [ 'sets' => [ 'default' => [ 'path' => 'resources/images/svg', ], ], ];
Warning
Always make sure you're pointing to existing directories.
Multiple Paths
In addition to a single path, you may define multiple paths for a single set with the paths
option instead:
<?php return [ 'sets' => [ 'default' => [ 'paths' => [ 'resources/images/icon-set', 'resources/images/other-icon-set', ], ], ], ];
This gives you the benefit from grouping icons from different paths under a single set where you can define the same prefix and default classes.
Warning
When using multiple paths instead of one, Blade Icons will return the first icon it finds when an icon name is present in more than one path. Please ensure you use unique icon names when registering multiple paths if you want to retrieve the correct icon.
Filesystem Disk
If you host your icons on an external filesystem storage you can set the disk
option for an icon set to a disk defined in your filesystems.php
config file. For example, you might store your icons on an AWS S3 bucket which is set in your filesystems.php
config file with a disk key of s3-icons
:
<?php return [ 'sets' => [ 'default' => [ 'path' => '/', 'disk' => 's3-icons', ], ], ];
And from now on our default set will pull the icons from the S3 bucket. Also notice we've adjusted the path to /
because we store our icons in the root directory of this S3 bucket. If you have several icon sets uploaded to the same disk you can set your paths accordingly:
<?php return [ 'sets' => [ 'heroicons' => [ 'path' => 'heroicons', 'disk' => 's3-icons', 'prefix' => 'heroicon', ], 'zondicons' => [ 'path' => 'zondicons', 'disk' => 's3-icons', 'prefix' => 'zondicon', ], ], ];
Fallback Icons
If you want to provide a fallback icon when an icon cannot be found, you may define the fallback
option on a specific set:
<?php return [ 'sets' => [ 'default' => [ 'fallback' => 'cake', ], ], ];
Now when you try to resolve a non-existing icon for the default icon set, it'll return the rendered "cake" icon instead.
You can also provide a global fallback icon instead. This icon will be used when an icon cannot be found and the set doesn't have its own fallback icon defined. It can reference any icon from any registered icon set.
<?php return [ 'fallback' => 'heroicon-cake', ];
Note
There's one caveat when using fallback icons and that is that they don't work when using Blade Components. In this case, Laravel will throw an exception that the component cannot be found. If you want to make use of fallback icons please consider one of the other usages.
Prefixing Icons
In the default icon set the icon
prefix will be applied to every icon, but you're free to adjust this in the blade-icons.php
config file:
<?php return [ 'sets' => [ 'default' => [ 'prefix' => 'icon', ], ], ];
Defining a prefix for every set is required and every prefix should be unique.
When referencing icons with the Blade directive or helper you can omit the prefix to reference icons from the default
set. When referencing icons from other sets, using the prefix is required.
When an icon in the default set has a name which collides with a prefix from a set then the icon from the default set is retrieved first.
Please note that it's best practice that your icons themselves do not have the prefix in their name. So if you have a prefix in your set called icon
and your icons are named icon-example.svg
you should rename them to example.svg
. Otherwise you can run into unexpected name resolving issues.
It's also important to note that icon prefixes cannot contain dashes (-
) as this is the delimiter which we use to split it from the rest of the icon name.
Default Classes
You can optionally define classes which will be applied to every icon by filling in the class
setting in your blade-icons.php
config file:
<?php return [ 'class' => 'icon icon-default', ];
If you don't want any classes to be applied by default then leave this as an empty string. Additionally, the same option is available in sets so you can set default classes on every set.
The sequence in which classes get applied is <global classes> <set classes> <explicit classes>
. You can always override this by passing an explicit class with your attributes. Component classes cannot be overridden.
Default Attributes
You can also optionally define some attributes which will be added to every icon in the attributes
setting of your blade-icons.php
config file:
<?php return [ 'attributes' => [ 'width' => 50, 'height' => 50, ], ];
This always needs to be an associative array. Additionally, the same option is available in sets so you can set default attributes on every set.
The sequence in which classes get applied is default attributes / set attributes / explicit attributes
where the latter overwrites the former. It is not possible to overwrite existing attributes on SVG icons. If you already have attributes defined on icons which you want to override, remove them first.
Usage
There are several ways of inserting icons into your Blade templates. We personally recommend using Blade components, but you can also make use of a Blade directive if you wish.
Components
The easiest way to get started with using icons from sets are Blade components:
<x-icon-camera/>
Icons in subdirectories can be referenced using dot notation:
<x-icon-solid.camera/>
You can also pass classes to your icon components (default classes will be applied as well):
<x-icon-camera class="icon-lg"/>
Or any other attributes for that matter:
<x-icon-camera class="icon-lg" id="settings-icon" style="color: #555" data-baz/>
Note
With Blade components, using a prefix is always required, even when referencing icons from the default set.
Deferring icons
When you're using the same icon in lots of places on the page the DOM element count may explode upwards. To remedy this you can add the defer attribute to the components:
<x-icon-camera defer />
This will push the icons to the stack "bladeicons", you should load this stack at the bottom of your page
... <svg hidden class="hidden"> @stack('bladeicons') </svg> </body> </html>
Warning
Deferring icons is only possible using the <x-icon>
component. This feature doesn't work with the @svg
Blade directive or the svg()
helper function.
Using deferred icons in JavaScript
You can re-use your icons from blade in your JavaScript rendered views by providing a custom defer value that will be used as an identifier:
<x-icon-camera defer="my-custom-hash" />
Then, in your JavaScript, create an svg
element with use
and href="#icon-{your-hash}"
attribute.
function icon() { return <svg><use href="#icon-my-custom-hash"></use></svg> }
Default Component
If you don't want to use the component syntax from above you can also make use of the default Icon
component that ships with Blade Icons. Simply pass the icon name through the $name
attribute:
<x-icon name="camera"/>
If you want to use a different name for this component instead you can customize the components.default
option in your blade-icons.php
config file:
<?php return [ 'components' => [ 'default' => 'svg', ], ];
Then reference the default icon as follow:
<x-svg name="camera"/>
You can also completely disable this default component if you want by setting its name to null
:
<?php return [ 'components' => [ 'default' => null, ], ];
Disabling Components
Although they're enabled by default, if you don't wish to use components at all you may choose to disable them completely by setting the components.disabled
setting in your blade-icons.php
config file to true
:
<?php return [ 'components' => [ 'disabled' => true, ], ];
Doing this makes sense when you're only using the directive or the helper and can improve overall performance.
Directive
If components aren't really your thing you can make use of the Blade directive instead. If you defined a default icon
class in your config and want to render a camera
icon with an icon-lg
class you can do that like so:
@svg('camera', 'icon-lg')
Any additionally attributes can be passed as a third array argument, and they'll be rendered on the svg
element:
@svg('camera', 'icon-lg', ['id' => 'settings-icon'])
If you don't have a class to be defined you can also pass these attributes as the second parameter:
@svg('camera', ['id' => 'settings-icon'])
If you want to override the default classes, pass in the class as an attribute:
@svg('camera', ['class' => 'icon-lg'])
Attributes without a key, are supported too:
@svg('camera', ['data-foo'])
Helper
If you'd like, you can use the svg
helper to expose a fluent syntax for setting SVG attributes:
{{ svg('camera')->id('settings-icon')->dataFoo('bar')->dataBaz() }}
Accessibility
If the icon should have semantic meaning, a text alternative can be added with the title attribute. Refer to the Usage section of this documentation to learn how to add an attribute.
For almost all use cases, your icon will be assuming the role of an image. This means that deciding on if your icon has any semantic meaning, or what that semantic meaning is, you can use the WCAG alt text decision tree.
If your icon has semantic meaning, using the title attribute will apply the following features to the SVG element:
- Child element of
<title>
with a unique ID containing the value that was passed title
attribute containing the value that was passedrole="img"
aria-labelledby
to refer to the unique ID of the title element
Example usage:
<x-icon-camera title="camera" /> @svg('camera', ['title' => 'camera'])
Example result:
<svg title="Camera" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" > <title> Camera </title> <path fill="currentColor" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path> </svg>
If your icon does not have semantic meaning, you may want to hide the icon to reduce overall document clutter. You may do this by adding aria-hidden="true"
to your icon.
Building Packages
If you're interested in building your own third party package to integrate an icon set, it's pretty easy to do so. We've created a template repo for you to get started with. You can find the getting started instructions in its readme.
If you want to learn how to create packages we can recommend these two excellent courses:
Make sure to load your SVGs from the register
method of your package's service provider. Provide the path to your SVGs and provide your own unique set name and component prefix:
use BladeUI\Icons\Factory; public function register(): void { $this->callAfterResolving(Factory::class, function (Factory $factory) { $factory->add('heroicons', [ 'path' => __DIR__.'/../resources/svg', 'prefix' => 'heroicon', ]); }); }
Now your icons can be referenced using a component, directive or helper:
<x-heroicon-o-bell/> @svg('heroicon-o-bell') {{ svg('heroicon-o-bell') }}
Don't forget to make blade-ui-kit/blade-icons
a requirement of your package's composer.json
.
Generating Icons
Blade Icons also offers an easy way to generate icons for your packages. By defining a config file with predefined source and destination paths, you can make updating your icons a breeze.
First, start off by creating a generation.php
config file in the config
directory of your icon package. Next, you can define an array per icon set that you want to generate. Below is a full version of this file with explanation for every option. Only the source
and destination
options are required.
<?php use Symfony\Component\Finder\SplFileInfo; return [ [ // Define a source directory for the sets like a node_modules/ or vendor/ directory... 'source' => __DIR__.'/../node_modules/heroicons/outline', // Define a destination directory for your icons. The below is a good default... 'destination' => __DIR__.'/../resources/svg', // Strip an optional prefix from each source icon name... 'input-prefix' => 'o-', // Set an optional prefix to applied to each destination icon name... 'output-prefix' => 'o-', // Strip an optional suffix from each source icon name... 'input-suffix' => '-o', // Set an optional suffix to applied to each destination icon name... 'output-suffix' => '-o', // Enable "safe" mode which will prevent deletion of old icons... 'safe' => true, // Call an optional callback to manipulate the icon with the pathname of the icon, // the settings from above and the original icon file instance... 'after' => static function (string $icon, array $config, SplFileInfo $file) { // ... }, ], // More icon sets... ];
See an example config/generation.php
file for the Heroicons package.
After setting up your config file you can use the icon generation as follow from the root of your icon package directory:
vendor/bin/blade-icons-generate
Changelog
Check out the CHANGELOG in this repository for all the recent changes.
Maintainers
Blade Icons is developed and maintained by Dries Vints.
License
Blade Icons is open-sourced software licensed under the MIT license.