juiko / phosphoricon

1.2.0 2026-08-24 08:39 UTC

MIT

• Juiko

• laravel
• react
• vue
• phosphor-icons

Published on Packagist.org on 2026-08-24 08:46 UTC

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

i. React

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

ii. Vue

php artisan vendor:publish --tag=phosphoricon-components-vue

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

i. 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)}/>
  );
})}
...

ii. Vue

import PhosphorIcon from './PhosphorIconUtils.vue';

...
<button v-for="icon in icons" :key="icon.id" class="p-1" type="button" @click="selectedIcon = icon.id">
  <PhosphorIcon :item="icon" :size="32" />
</button>
...

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 (item.phosphor_icon is icon data and 16 is icon size in px)

i. React

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

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

ii. Vue

import PhosphorIcon from '../components/PhosphorIconUtils.vue';

...
<PhosphorIcon :item="item.phosphor_icon" :size="16" />
...

Examples

• React - Sample React Application
• Vue - Sample Vue Application

License

Phosphor Icons - MIT