README

在您的 Laravel 应用中使用 <x-hero::icon></x-hero::icon> 作为 Blade 组件来使用 Heroicons。

<x-hero::icon name="o:terminal" size="56"></x-hero::icon>

此包使用 Heroicons 作为 SVG 图标源代码仓库，并使用其分组作为组件属性的图标命名。

• Tajid Yakub tajid.yakub@gmail.com
• https://github.com/tajidyakub/heroicons-blade.git

安装

通过您的 Laravel 应用中的 composer 安装。通过 blade 组件 <x-hero::icon></x-hero::icon>，Heroicons 的图标将立即在您的 Laravel 视图中可用。

composer require tjd/heroicons-blade

此包包含 JavaScript 和 svg 图标资产，需要发布到您的 Laravel 应用目录中。在包要求之后，执行发布 artisan 命令。

php artisan vendor:publish --provider="Tj\Icon\HeroiconsBladeServiceProvider" --tag="assets"

如果应用使用 blade 的布局，则需要附加 JavaScript 文件，这可以在主布局的脚本部分完成。

<script src="/heroicons/assets/heroicons.js"></script>

组件属性和使用方法

组件 hero::icon 将具有以下属性，您可以根据需要调整它们。

@props([
    'name' => 'o:user', // the default icon use o: for outline and s: for solid
    'size' => 24, // default size, used for width and height of the svg icon
    'fill' => 'none' , // used for icon's fill color
    'stroke' => 'currentColor' // stroke props is for stroke color
])

通过调整 name 属性，组件可以显示具有相同名称的 Heroicons svg 图标，例如 o:user 转换为 outline/user.svg。

class 属性将合并到 svg 元素中，任何在 <x-hero::icon> 上定义的 class 属性值将直接在 svg 元素中定义。

<!-- outline/terminal icon with 48 width and height -->
<x-heroicon size=48 name="o:terminal"></x-heroicon>

进一步样式化

通过创建一个名为 .tj-heroicons 的 css 类，可以使用 css 进行进一步样式化，该类绑定到 svg 元素，因此可以在其中插入样式属性。

它做什么

翻译后的 name 属性将用于与 Laravel 应用相同的宿主中的 url，并从公共 heroicons/icons 目录（默认为 public/icons/）fetch 图标内容。在执行 vendor:publish 时完成了复制过程。

开发

这是一个简单的包，可以通过增强 resources/script/ 目录中的 JavaScript 文件和在 resources/views/components/ 目录中的匿名组件模板来进行进一步的开发。

参考资料

• Heroicons https://heroicons.com/。
• Heroicons Git 仓库 https://github.com/tailwindlabs/heroicons，已作为子模块在此存储库中的 resources/ 目录中克隆。