README

这是一个简单但具有意见的包，用于轻松渲染英雄图标。

就像这样简单（在你的blade文件中）

@heroIcon('arrow-right')

此包提供了一种选项，可以在blade文件中轻松包含英雄图标，并且还可以在图标svg中操作html。

HeroIcons由tailwindcss的制作者提供，您可以在以下位置找到它们：https://heroicons.com/

安装

通过composer将包导入您的Laravel项目中

composer require antonioprimera/laravel-heroicons

使用方法

Blade指令

该包设置了一个专门的blade指令@heroIcon('icon-name', 'icon-format')。这创建了一个图标实例并将其渲染。第一个参数是名称（必需）和第二个参数是格式，它是可选的，必须是'solid'或'outline'之一。如果没有提供，默认格式是'outline'。

<div class="w-6">
    @heroIcon('arrow-down', 'outline')
</div>
<div class="w-6">
    @heroIcon('arrow-up')
</div>

此blade指令是为了使用视图缓存的全部功能而创建的，因此它只接受静态（字符串）参数，不接受变量或常量。

如果您需要更灵活的选项，可以使用blade指令@dynamicHeroIcon($name, $format, $options)。此指令不会缓存svg字符串，但在每次渲染视图时都会重新渲染svg。使用此blade指令，您可以使用变量和常量。

<div class="w-6">
	@dynamicHeroIcon($iconName, AntonioPrimera\HeroIcons\HeroIcon::FORMAT_SOLID)
</div>
<div class="w-6">
	@dynamicHeroIcon($iconName, $format, AntonioPrimera\HeroIcons\HeroIcon::SVG_REMOVE_SIZE)
</div>
<div class="w-6">
    <!-- You can also use the dynamic hero icon like the static one-->
    @dynamicHeroIcon('arrow-left')
</div>

HeroIcon实例

所有使用场景都依赖于AntonioPrimera\HeroIcons\HeroIcon的一个实例。

$icon = new \AntonioPrimera\HeroIcons\HeroIcon('arrow-down');
$iconHtmlString = $icon->render();

构造函数始终需要图标名称，该名称可在heroicons网站上找到。名称被转换为kebab-case，因此您可以使用任何格式，只要名称的kebab-case与图标集中的图标相对应即可。

例如，以下示例创建相同的图标

use AntonioPrimera\HeroIcons\HeroIcon;

$icon = new HeroIcon('arrow-down');
$icon = new HeroIcon('Arrow Down');
$icon = new HeroIcon('ArrowDown');

默认情况下，如果没有指定格式，图标是从'outline'图标子集创建的。您可以使用HeroIcon类公开的两个常量之一

use AntonioPrimera\HeroIcons\HeroIcon;

$icon = new HeroIcon('arrow-down', HeroIcon::FORMAT_OUTLINE);
$icon = new HeroIcon('arrow-down', HeroIcon::FORMAT_SOLID);

构造函数的第三个参数是选项的位组合。目前有以下选项可用

use AntonioPrimera\HeroIcons\HeroIcon;

$defaultOptions = HeroIcon::SVG_CURRENT_COLOR & HeroIcon::SVG_REMOVE_SIZE;

如果SVG_CURRENT_COLOR被设置，则图标的默认描边颜色将被'currentColor'替换，因此图标的颜色将是父容器中设置的颜色的颜色。

如果SVG_REMOVE_SIZE被设置，则默认图标大小（宽度和高度，以像素为单位）将被删除，因此可以使用类来调整图标的大小。在我看来（这完全是主观的），使用图标的最佳方式是将其宽度设置为父容器的100%，并调整父容器的大小。

HeroIcon静态构造函数

您可以使用与构造函数相同签名的静态方法HeroIcon::create(...)来创建一个新的HeroIcon实例。

助手

还有一个heroIcon助手函数。

以下可以看到函数签名。

function heroIcon(
	string $name,
	string $format = HeroIcon::FORMAT_OUTLINE,
	$classes = '',
	array $attributes = [],
	int $options = HeroIcon::SVG_REMOVE_SIZE | HeroIcon::SVG_CURRENT_COLOR
){ ... }

助手函数将返回渲染的svg图标html，可选地应用一个或多个类（作为字符串或数组）和一组属性。

Htmlable

HeroIcon类实现了Htmlable接口，因此您可以将HeroIcon实例直接放入blade文件中，放在双大括号之间，它将被渲染为html svg图标。以下是一个示例

<div>{{ HeroIcon::create('server')->setClass('w-6') }} My Server</div>

方法

创建后，图标实例可以进行配置，向外部svg节点添加css类，在外部svg节点上设置像素大小，并设置属性。

setClass(string | array $classes)

此方法允许您在svg外部节点上设置一个或多个HTML类。类可以提供为字符串或索引数组。

setAttributes(array $attributes)

此方法允许您在外部svg节点上设置一个或多个属性，提供一个属性名称 => 值对的关联数组。

setPathAttributes(array $attributes)

此方法允许您在svg内部的所有路径节点上设置一个或多个属性。属性必须提供为属性名称 => 属性值对的关联数组。

getSvgInstance()

HeroIcon类在内部使用meyfa/php-svg包，此方法暴露了HeroIcon实例用于操作和渲染svg的SVG\SVG实例。

未来开发

该包可能会使用一些更高级的功能，例如

• 缓存图标（以便图标可重复使用）
• 删除/检查/检索外部节点上的属性
• 操作内部节点（这可以通过SVG实例完成 - 请参阅方法getSvgInstance）
• 更好的测试
• 将此包与其他图标集（文件中的svg集合/svg文件）一起使用在自定义位置（在laravel项目中导入此包）
• 保持图标集合最新（也许创建一个工具来自动检查/导入）来自heroicons git仓库的图标文件
• 优化svg文件，添加currentColor选项并直接删除文件中的sizes - 这将减小文件大小，并且不需要在每次图标实例化时执行此操作（在使用@heroIcon blade指令时这不是问题，因为结果是缓存的）。

此包应保持非常轻量级和快速。对于高级使用