README

这是一个用于svg图标选择的Laravel Nova 4字段。

此包允许您在存储中创建svg图标集，并允许您的用户从Laravel Nova的字段中选择任何图标。

例如，您可以使用它将FontAwesome图标（或类似，例如Heroicons，甚至是您自己的图标！）存储在存储中，并在前端直接使用SVG，以避免捆绑整个图标集。与从网络字体文件导入所有图标相比，这将非常轻量。

安装

您可以通过composer将包安装到使用Nova的Laravel应用中

composer require datomatic/nova-icon-field

发布翻译以设置图标样式的标签

php artisan vendor:publish --provider="Datomatic\NovaIconField\FieldServiceProvider" --tag="translations"

发布配置文件并编辑它以符合您的喜好

php artisan vendor:publish --provider="Datomatic\NovaIconField\FieldServiceProvider" --tag="config"

特别是，您必须设置一个存储磁盘来存储所有图标。您可以在config/filesystems.php中创建一个，例如

    'nova-icon-field' => [
        'driver' => 'local',
        'root' => storage_path('icons'),
        'throw' => false,
    ],

预期的目录结构包括根目录上的目录，用于定义可用的样式，以及每个目录中特定样式的svg格式图标。例如

    fontawesome-solid/
        abacus.svg
        album.svg
        angel.svg
        ...
        
    heroicons/
        arrow-down.svg
        arrow-up.svg
        bars.svg
        ...
    
    ...

存储将被探索一次，结果将被缓存在您的Laravel缓存中。如果您对文件进行了一些更改（例如，添加/删除一个图标或目录），您必须按图标选择器上的“更新”按钮以查看更改。

样式和图标将根据文件夹和文件名（无扩展名）进行考虑，转换为短横线连接的形式。因此，如果您的图标文件命名为Your Beautiful Icon.svg，则图标名称将为your-beautiful-icon。

使用方法

将字段添加到您的Nova资源字段中

  use Datomatic\NovaIconField\NovaIconField;

  NovaIconField::make('Icon')

您可以根据如下方式覆盖字段按钮的文本

  NovaIconField::make('Icon')
    ->addButtonText('Click me!')

您可以根据如下方式设置未设置图标时的默认图标。第一个参数是样式，第二个是图标名称

  NovaIconField::make('Icon')
    ->defaultIcon('solid', 'check-circle')

如果您想保留默认图标（当它们清除时将返回默认值，因此不能为空），则添加以下内容

  NovaIconField::make('Icon')
    ->defaultIcon('solid', 'check-circle')
    ->persistDefaultIcon()

您可以根据如下方式限制用户可以从中选择的图标

  NovaIconField::make('Icon')->only([
    'solid', // enables all the icons with style `solid` or name `solid`
    
    ['style' => 'solid'], // enable all the icons with style `solid`
    ['icon' => 'arrow-up'], // enable all the icons with name `arrow-up`
    
    'solid arrow-down', // enables the icon with style `solid` and name `arrow-down`
    ['style' => 'solid', 'icon' => 'arrow-down'], // enables the icon with style `solid` and name `arrow-down`
  ])

所选图标将作为由所选样式（短横线连接）和所选图标（短横线连接）组成的一串字符串存储在数据库中，它们由空格分隔（例如，solid arrow-up）。

您可以通过更改配置来选择是否在数据库中存储的样式和/或图标前添加或附加前缀或后缀。

例如，通过设置

// config/nova-icon-field.php
return [
    // ...
    'style_prefix' => 'fa-',
    'icon_prefix' => 'fa-',
    // ...
];

存储的图标将保存为fa-solid fa-arrow-up（可以直接用作FontAwesome类名）。

在您的代码中（即在设置only([...])或defaultIcon(...)时），您始终会引用图标和样式而无需任何前缀/后缀。前缀/后缀仅用于可视化以及从（到）数据库的（反）脱水。

安全性

如有需要，您可以从配置文件设置将用于保护此库使用的端点（获取样式、图标列表、清除缓存和获取SVG）的中间件。

仅在nova上使用的路由（获取样式、图标列表和清除缓存）以及用于获取给定图标SVG的路由被单独处理（这样您也可以从您的前端使用它）。

您还可以选择为请求设置额外的头（对于nova请求）或查询参数（对于图标SVG请求）。

一种可能的方法是设置一个中间件，该中间件验证请求头中是否存在秘密令牌。

如果您想在 SVG 请求上设置速率限制，请记住，当从图标选择器请求图标时需要跳过节流（因为那里会加载很多图标）。为了实现这一点，您可以创建一个自定义中间件，根据是否存在带有秘密令牌的查询参数来启用/禁用速率限制。

在前端可视化所选图标

所选图标将以字符串形式存储在数据库中，该字符串由所选样式（使用短横线连接）和所选图标（使用短横线连接）组成，并用空格分隔，如果配置中设置了，则还包括额外的前缀和后缀（例如，solid arrow-up）。

在您的客户端中，您可以通过使用以下端点来获取 SVG：

http(s)://{host}/nova-icon-field/{style}/{icon}

您可以从配置中更改 URL 中的 nova-icon-field 部分。{style} 和 {icon} 应该提供，不包含前缀和后缀。

要可视化 SVG，有几种不同的方法：您可以通过 <img> 标签、<iframe> 标签插入，或者使用某些特定框架的库，例如

Vue: vue-inline-svg
React: react-svg

还有许多其他方法。您应该根据自己的需求和框架找到最适合您的解决方案。

许可证

MIT 许可证（MIT）。有关更多信息，请参阅许可证文件。

datomatic / nova-icon-field

维护者

详细信息

README

安装

使用方法

安全性

在前端可视化所选图标

许可证