tjd/heroicons-blade

The convinience of using Heroicons svg icons as Blade component <x-hero::icon></x-hero::icon> in Laravel

Maintainers

Details

github.com/tajidyakub/heroicons-blade

Source

Issues

Installs: 3

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Language:JavaScript

dev-master 2022-01-08 18:05 UTC

Requires (Dev)

MIT d1e864508cb90e9769588c4be1a22a65162c5b48

  • Tajid Yakub <tajid.yakub.woop@gmail.com>

This package is auto-updated.

Last update: 2024-06-08 23:29:56 UTC

README

Heroicons as a Blade component using <x-hero::icon></x-hero::icon> in your Laravel App.

heroicons-blade.png

<x-hero::icon name="o:terminal" size="56"></x-hero::icon>

The package is using Heroicons as SVG Icons source repository and using its grouping as icon naming in the component's props.

Installation

Install through composer in your laravel app. Icons from Heroicons will be instantly available in your Laravel Views using blade componennt <x-hero::icon></x-hero::icon>

composer require tjd/heroicons-blade

The package comes with javascript and svg icons assets which need to be published in to your laravel app directory, execute publish artisan command after the package required.

php artisan vendor:publish --provider="Tj\Icon\HeroiconsBladeServiceProvider" --tag="assets"

You need to attach the javascript file, if the app is using blade's layout, this could be put on the script section of the main layout.

<script src="/heroicons/assets/heroicons.js"></script>

Component's props and usage

Component hero::icon will have these props which you can adjust.

@props([
    'name' => 'o:user', // the default icon use o: for outline and s: for solid
    'size' => 24, // default size, used for width and height of the svg icon
    'fill' => 'none' , // used for icon's fill color
    'stroke' => 'currentColor' // stroke props is for stroke color
])

By adjusting the name prop, component will be able to display Heroicons svg icon with the same name, for example o:user translated into outline/user.svg.

class attribute will be merged into svg element, any class attribute values defined on the <x-hero::icon> will be defined directly in the svg element.

<!-- outline/terminal icon with 48 width and height -->
<x-heroicon size=48 name="o:terminal"></x-heroicon>

heroicons-blade-component-example.png

Further styling

Further styling using css is possible by creating a css class called .tj-heroicons the class is binded with the svg element therefor you could insert style properties in it.

What it does

Translated name props will be used by url in the same host with laravel app and fetch the icon content from the public heroicons/icons dir which by default is using public/icons/, the copy proccess was done when the assets published with vendor:publish.

Development

It is a simple package, further development can be made by enhancing the javascript file in the resources/script/ dir and icon anonymous component template in resources/views/components/ dir.

References