juiko/phosphoricon

Phosphor Icon Library for Laravel

1.0.2 2024-03-05 12:41 UTC

MIT

• Juiko

• laravel
• react
• phosphor-icons

README

Add Phosphor Icons on Laravel Web Application. To add icon to web application common methods is using component import e.g. import { IconName }. With Phosphor Icons Library for Laravel, icon information is saved inside database. Allow icon change on web page without recompile web application.

Installation

Install package with composer

composer require juiko/phosphoricon

Then run migration to create database table for Phosphor Icons

php artisan migrate

After that run import command to import icon data into Phosphor Icons

php artisan phosphor-icon:import

Install Phosphor Icon packages and utils, example for React

npm i @phosphor-icons/react
php artisan vendor:publish --tag=public

Usage

Icon Library

To create api to display Phosphor Icon Library, add PhosphorIcon Facades into Controller then call getData()

use PhosphorIcon;

...
public function icons()
{
  return PhosphorIcon::getData();
}
...

To display icons after call the api, example for React

import { phosphorIconCustom } from "@/Components/PhosphorIconUtils";

...
{icons.map((icon, index) => {
  const IconCustom = phosphorIconCustom(icon);
  return (
    <IconCustom key={index} className="w-8 h-8" size="32" onClick={() => console.log("Selected Icon: %d", icon.id)}/>
  );
})}
...

Render Icon

Use getIcon method to retrieve icon data if phosphor_icon_id column exist

use PhosphorIcon;

...
public function index(Request $request)
{
  $mymodel = Mymodel::get();
  $mymodelWithIcon = PhosphorIcon::getIcon($mymodel);

  return response()->json($mymodelWithIcon);
}
...

To render icons after call the api, example for React (item.phosphoricon is icon data and 16 is icon size in px)

import { phosphorIcon } from "@/Components/PhosphorIconUtils";

...
<div>{phosphorIcon(item.phosphoricon, 16)}</div>
...

Examples

• React - Sample React Application

Roadmap

• Support for Blade and Vue

License

Phosphor Icons - MIT