devzkhalil/laravel-primer-octicons

v1.0.0 2024-08-02 11:56 UTC

MIT

• devzkhalil

README

Laravel Primer Octicons

A Laravel package to integrate GitHub's Octicons into your Laravel project effortlessly. This package allows you to use Octicons directly in your Blade templates with ease.

About

Octicons are a scalable set of icons handcrafted by GitHub. They are designed to be highly legible, even at small sizes, and are perfect for adding a consistent visual language to your web projects.

GitHub Repository: primer/octicons
Official Site: Octicons

Installation

You can install the package via Composer:

composer require devzkhalil/laravel-primer-octicons

Usage

After installing, you can use the Octicons in your Blade templates like this:

<x-icon::thin.arrow-up-left width="16" height="16" fill="white" />
<x-icon::bold.arrow-up-left width="16" height="16" fill="white" />

<x-icon::thin.download width="24" height="24" fill="white" />
<x-icon::bold.download width="24" height="24" fill="white" />

Icon Sizes and Parameters

In this package:

• GitHub 16px icons are referred to as bold.
• GitHub 24px icons are referred to as thin.

Component Parameters

For Bold Icons (16px):

• width is optional; the default size is 16px.
• height is optional; the default size is 16px.
• fill is optional; the default color is black.

For Thin Icons (24px):

• width is optional; the default size is 16px.
• height is optional; the default size is 16px.
• fill is optional; the default color is black.

Finding Icon Names

To find the name of an icon:

1. Visit the official Octicons site: Octicons.
2. Locate and copy the name of your desired icon.
3. Use the icon in your Blade templates with the appropriate size:

For 16px icons (bold):

<x-icon::bold.your-icon-name />

For 24px icons (thin):

<x-icon::thin.your-icon-name />

Publish Components

Publish the components file with the following command:

php artisan vendor:publish --tag=primer-octicons