osmianski/laravel-heroicons

Heroicons 作为 Laravel Blade 组件

v0.1.3 2023-03-17 13:25 UTC

This package is auto-updated.

Last update: 2024-09-10 23:51:54 UTC


README

更新. 我希望我早点知道这个。 Blade UI Kit 与此包执行相同的功能,甚至更多。话虽如此,此包不再维护。

Heroicons - 由 Tailwind CSS 制造商精心制作的美丽 SVG 图标,可作为 Laravel Blade 组件使用

heroicons.com

安装

使用以下命令将 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>

在这里,:: 后的第一个词是类别(outlinesolidmini),第二个是图标的名称。

为了比较,考虑一下“旧”的方法 - 从 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 许可证的许可。