README

Blade Font Awesome 6 图标

一个用于在Laravel Blade视图中轻松使用 Font Awesome 6 的包。

要查看所有可用图标，请查看 "resources/svg" 目录 或搜索

要求

• PHP 7.4 或更高版本
• Laravel 8.0 或更高版本

安装

$ composer require toneflix-code/blade-fontawesome6-free

用法

图标可以作为自闭合的Blade组件使用，将被编译为SVG图标

<x-fa6-circle-check-solid />
<x-fa6s-circle-check />

您也可以向图标组件传递类

<x-fa6-circle-check-regular class="w-6 h-6 text-gray-500 fill-current"/>
<x-fa6r-circle-check class="w-6 h-6 text-gray-500 fill-current"/>

并且还可以使用内联样式

<x-fa6-500px-brand style="fill: #F00" />
<x-fa6b-500px style="fill: #F00" />

可用集合

该库预先捆绑了所有Fontawesome 6免费图标，如果您有许可证，您可以自由扩展到专业图标

可用集合包括

all      []
regular  [r]
solid    [s]
brands   [b]

如果您选择使用“all”集合，您需要将所需集合的适当后缀添加到指令中

<x-fa6-check-solid />

如果您没有使用特定集合，则必须将集合的第一个字母添加到前缀中

<x-fa6r-bell />

原始SVG图标

如果您想将原始SVG图标作为资产使用，可以使用以下方式发布它们

php artisan vendor:publish --tag=blade-fontawesome6-free --force

然后在视图中使用它们，如下所示

<img src="{{ asset('vendor/blade-fontawesome6/all/fa6-circle-check-regular.svg') }}" width="10" height="10"/>

HTML <select></select>

您还可以创建一个预先填充您首选图标集的html <select></select>，方便使用。

<x-fa6-select-icon />

fa6-select-icon 需要您发布原始SVG图标作为资产，有关详细信息，请参阅 原始SVG图标 部分

fa6-select-icon 接受所有HTML选择参数和三个可选参数

    string "selected": <!-- A string value representing the name of the currently selected icon -->
    string "set": <!-- The name of the required icon set -->
    string "path": <!-- You are also allowed to load icons not presently part of the library, in this case use an absolute path to the required icons directory -->

    <x-fa6-select-icon name="choose_icon" class="form-control" />
    <x-fa6-select-icon selected="circle-check" set="solid" />
    <x-fa6-select-icon selected="circle-check" set="solid" :path="public_path('icons/remix')" />

如果您想自定义选择字段的渲染方式，可以发布视图

php artisan vendor:publish --tag=blade-fontawesome6-views --force

您将在以下位置找到自定义视图文件： views/vendor/blade-fontawesome6

助手

为方便起见，已提供 loadSvg() 助手方法来生成 [您所选集合中所有可用的图标 | 使用blade指令生成的一个原始图标 | 如果您需要直接将其附加到HTML标签中，则是一个图标URL]。

loadSvg() 助手方法需要您发布原始SVG图标作为资产，有关详细信息，请参阅 原始SVG图标 部分

loadSvg() 助手方法接受四个可选参数

loadSvg(
    string $icon_name = null  // The name of an icon that is currently available in the active set
    string $ICONS_PATH = null // You are also allowed to load icons not presently part of the library, in this case use an absolute path to the required icons directory
    boolean $link = false     // A boolen value indicating whether you want a the raw icon returned or an absolute link to the icon
    boolean $set = 'all'      // The name of the required icon set
}

Blade 图标

Blade Font Awesome 6 Icon 在底层使用Blade Icons。有关附加功能，请参阅 Blade Icons 的README

测试

$ composer test

鸣谢

• 3m1n3nc3.
• 所有贡献者

许可

本项目受MIT许可证（MIT）许可 – 有关详细信息，请参阅 LICENSE 文件。