README

在 Laravel Web 应用程序中添加 Phosphor 图标。要添加图标，通常使用组件导入，例如 import { IconName }。使用 Phosphor Icons Library for Laravel，图标信息保存在数据库中。允许在网页上更改图标而无需重新编译 Web 应用程序。

安装

使用 composer 安装包

composer require juiko/phosphoricon

然后运行迁移以创建 Phosphor 图标数据库表

php artisan migrate

之后运行导入命令将图标数据导入 Phosphor 图标

php artisan phosphor-icon:import

安装 Phosphor 图标包和工具，例如 React

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

用法

图标库

要创建用于显示 Phosphor 图标库的 API，将 PhosphorIcon Facades 添加到控制器中，然后调用 getData()

use PhosphorIcon;

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

调用 API 后显示图标，例如 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)}/>
  );
})}
...

渲染图标

使用 getIcon 方法检索图标数据，如果存在 phosphor_icon_id 列

use PhosphorIcon;

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

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

调用 API 后渲染图标，例如 React（item.phosphoricon 是图标数据，16 是图标大小，单位为像素）

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

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

示例

React - 示例 React 应用程序

路线图

Blade 和 Vue 支持

许可证

Phosphor Icons - MIT

juiko / phosphoricon

维护者

详细信息

README

安装

用法

图标库

渲染图标

示例

路线图

许可证