README

在您的Laravel 9.x或10.x应用程序中使用Feather Icons作为Blade include()或Blade Component。此包使用Feather 4.28.0。

安装

通过Composer简单地要求安装poldixd/larave-feather

composer require poldixd/laravel-feather

用法

在视图中将图标包括如Blade模板

<!-- Your Blade view -->
@include('feather::airplay')

<!-- Output: -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

如果您使用的是大于7.x的laravel，您可以选择使用Blade Components。

<!-- Your Blade view -->
<x:feather-activity />

<!-- Output: -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

您可以在此网站上找到所有图标的列表。

使用CSS类

您可以使用CSS类包含图标。

<!-- Your Blade view -->
@include('feather::airplay', ['class' => 'my-awesome-class my-second-class'])

<!-- or as a blade component -->
<x:feather-activity class="my-awesome-class my-second-class" />

<!-- Output: -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay my-awesome-class my-second-class"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

使用样式属性

<!-- Your Blade view -->
@include('feather::airplay', ['style' => 'color: red'])

<!-- or as a blade component -->
<x:feather-activity style="color: red" />

<!-- Output: -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-airplay" style="color: red"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

许可

poldixd/laravel-feather遵循MIT许可协议。此代码中的图标来自Feather。它也遵循MIT许可协议。