osmianski / laravel-heroicons
Heroicons 作为 Laravel Blade 组件
v0.1.3
2023-03-17 13:25 UTC
Requires
- illuminate/support: ~10
This package is auto-updated.
Last update: 2024-09-10 23:51:54 UTC
README
更新. 我希望我早点知道这个。 Blade UI Kit 与此包执行相同的功能,甚至更多。话虽如此,此包不再维护。
Heroicons - 由 Tailwind CSS 制造商精心制作的美丽 SVG 图标,可作为 Laravel Blade 组件使用
安装
使用以下命令将 Composer 包添加到您的项目中
composer require osmianski/laravel-heroicons
使用方法
在 heroicons.com 的 Outline、Solid 或 Mini 类别下找到图标,并使用以下语法将其添加到 Laravel Blade 模板中
<div class="text-gray-400 hover:text-gray-500"> <x-heroicons::outline.bell class="h-6 w-6" /> <x-heroicons::solid.user class="h-8 w-8" /> </div>
在这里,::
后的第一个词是类别(outline
、solid
或 mini
),第二个是图标的名称。
为了比较,考虑一下“旧”的方法 - 从 heroicons.com 复制 SVG 到您的代码中
<div class="text-gray-400 hover:text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8"> <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd" /> </svg> </div>
差异相当大,不是吗?
致谢
所有 Heroicons 都最初由 @tailwindlabs 创建。之后由 @osmianski 包装成 Laravel Blade 组件。
许可
此软件包是开源软件,受 MIT 许可证的许可。