Download the PHP package jtolj/simple-blade-heroicons without Composer
On this page you can find all versions of the php package jtolj/simple-blade-heroicons. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download jtolj/simple-blade-heroicons
More information about jtolj/simple-blade-heroicons
Files in jtolj/simple-blade-heroicons
Package simple-blade-heroicons
Short Description A simple way to use Heroicons in Blade templates.
License MIT
Homepage https://github.com/jtolj/simple-blade-heroicons
Informations about the package simple-blade-heroicons
Simple Blade Heroicons 2.0
Heroicons are a set of icons developed by Steve Schoger and Adam Wathan.
This package is a lightweight alternative to blade-ui-kit/blade-heroicons in that it simply wraps each SVG in an anonymous Blade component.
This version of the package uses Heroicons 2.
Requirements
- PHP 7.3 or higher
- Laravel 7.14 or higher
Installation
Optionally publish the configuration file:
Usage
Icons can be included in Blade templates by making use of the anonymous components that have been generated.
You can see a list of available icons at https://heroicons.com/.
For the 24x24 outline version, prefix the name with o-
.
For the 24x24 solid fill version, prefix the name with s-
.
For the 20x20 mini-solid version, prefix the name with ms-
.
For the 20x20 micro-solid version, prefix the name with mis-
.
Attributes
All attributes are passed through to the SVG tag.
For example:
Would render in the browser as:
Dynamic Component
A dynamic icon component is also available. The icon name can be be passed through the "icon" property.
For example:
<use href="#id">
support
This version of the package supports using references to the icon instead of outputting the full content of the SVG each time a component is used in Blade.
This results in a significantly lighter DOM when the same icon is used repeatedly on a page.
To use this feature, first add the following to your layout.blade.php
just before your closing </body>
tag:
You may then either update the 'use_references' configuration option to true to default to references, or set the push-ref
property to true
when rendering an icon.
JavaScript Frameworks
To use the icons in this package with JavaScript frameworks, set up the <x-heroicon::defs>
component as described above.
Next, pass a list of icons into the provided <x-heroicon::iconset>
component. This must appear before <x-heroicon::defs>
in your template.
The icons you list will become available to reference inside your JavaScript components.
A simple Vue.js example: