新Blade图标发布

大约两周前，我宣布了 Blade Icons 的新版本。这个新版本是 Adam Wathan 的 Blade SVG 和我之前开发的 Blade Icons 库 的合并。这些结合在一起，为与 SVG 图标一起工作提供了一个强大的工具。

如果你还不知道 Blade Icons 是什么，让我们简要回顾一下。Blade Icons 允许你轻松地引用和操作 SVG 图标。

<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>

您可以使用 Blade 组件来引用图标

<x-heroicon-o-camera class="h-6 w-6 text-blue-500" />

这使语法更加简单。除了代码行数更少之外，它还更容易看到您正在使用哪个图标。应用属性也变得轻而易举。

图标集

这个库的最显著新特性是引入了图标集。这允许您在单个应用程序中使用多个图标集而不是一个。

如果我们查看 Blade Icons 的配置文件，我们会看到我们可以定义多个集。它标配一个 默认 集指向您的 resources/svg 目录

<?php

return [
    'sets' => [
        'default' => [
            'path' => 'resources/svg',
            'prefix' => 'icon',
        ],
        'feather' => [
            'path' => 'resources/feather-icons',
            'prefix' => 'feather',
        ],
    ],
];

这样，您就可以从多个集中引用图标

<x-icon-bell />

<x-feather-cloud />

这个特性的另一个亮点是，现在它允许第三方包与 Blade 图标集成，并可以发布自己的图标集。为了展示这一点，我已经将从上一迭代中带有 Heroicons 和 Zondicons 图标集提取到单独的包中。

• Blade Heroicons
• Blade Zondicons

人们已经开始构建自己的第三方包！

指令 & 辅助函数

通过与 Blade SVG 的合并，Blade 图标现在也具备了一个`@svg` 指令和`svg()` 辅助函数，用于引用图标。

@svg('icon-camera')

{{ svg('feather-cloud') }}

这两种方法也允许您在没有前缀的情况下从默认图标集中引用图标。

@svg('camera')

{{ svg('camera') }}

svg() 辅助函数还允许您使用流畅的语法来设置属性。

{{ svg('camera')->id('settings-icon')->dataFoo('bar')->dataBaz() }}

结论

有更多配置选项，如果您想了解有关 Blade 图标的所有新内容，请务必查看说明。我希望您会喜欢 Blade 图标的新迭代，并且它对您的应用程序会有所帮助！