该包附带了一组图标，可以在 Bootstrap Icons 上找到。这些图标以 bs.* 为前缀，用于在代码中识别图标。

如果您正在寻找以前版本的图标列表，请访问 Orchid 图标包页面。

自定义图标

为了包含来自流行图标集（如 Font Awesome）的图标，您可以创建一个新目录来存储图标。例如，您可以在 resources 文件夹中创建一个新的 icons 目录和一个 fontawesome 子目录：

resources
  - css 
  - icons
      -- fontawesome 
  - js
  - lang
  - views

创建新目录后，您可以下载相应的图标并将其放置在新目录中。例如，您可以下载 notebook 图标 并将其放置在 fontawesome 子目录中。

接下来，您需要配置包以在新目录中搜索图标。您可以通过编辑 config/platform.php 配置文件来实现这一点：

'icons' => [
    // 其他图标配置
    'fa' => resource_path('icons/fontawesome')
],

在上面的示例中，我们声明了前缀 “fa” 和图标所在的目录。

为了在包的组件中显示图标，您只需传递前缀和图标的名称。例如，菜单中的图标定义如下所示：

Menu::make('自定义图标示例')
    ->icon('fa.address-book')
    ->url('https://orchid.software');

使用 Blade 组件

可以使用 Blade 组件轻松将图标集成到您的视图中。按照以下步骤在视图中无缝合并图标：

<x-orchid-icon path="fa.home" />

上面的代码渲染了具有指定图标路径的图标组件。

您还可以为图标组件应用其他属性：

<x-orchid-icon 
    path="fa.home" 
    class="icon-big" 
    width="2em" 
    height="2em" />

您还可以通过 使用 Blade 组件 在管理面板之外使用 Blade 图标组件。

使用模板进行服务器端渲染

在我们的应用程序中，我们完全依赖于服务器端渲染，这意味着我们不会专门为 JavaScript 控制准备图标。然而，仍然可以通过使用 <template> 标签在 JavaScript 中使用现有图标。

为此，您可以在页面上包含以下代码：

<template id="product-row">
  <tr>
    <td>{name}</td>
    <td>
      <x-orchid-icon path="minus" class="icon-minus" />
    </td>
  </tr>
</template>

在相应的 JavaScript 代码中，您可以使用模板创建具有所需内容的 DOM 元素。以下是一个示例：

let template = document.querySelector('#product-row');

let row = template.content.querySelector('tr').cloneNode(true);

row.innerHTML = row.innerHTML.replace(/{name}/gi, "Alexandr");

通过将 {name} 占位符替换为实际内容，您可以动态生成所需的元素。然后，您可以在页面上需要的地方插入此元素。