README

显示并选择一个免费的Font Awesome图标。

安装

下载Zip文件

将插件文件夹复制到 site/plugins

Composer

运行 composer require rasteiner/k3-awesome-picker。

使用方法

将一个 icon 字段添加到您的蓝图。您还可以选择通过声明所需样式来过滤可用的图标：brands（标志），solid（填充图标），regular（轮廓图标）

在您的模板中，您将获得所选图标的类名。

示例

蓝图

fields:
  myIcon:
    label: My Icon
    type: icon
    styles: 
      - brands 
      - solid

模板

<script src="https://kit.fontawesome.com/<yourkit>.js" crossorigin="anonymous"></script>

This is the chosen icon: <i class="<?= $page->icon() ?>"></i>

配置选项

在 rasteiner.awesome-picker 命名空间下，您将可以访问以下选项

SVG配置

如果您希望图标嵌入到您的页面中并通过SVG链接使用它们，此插件提供了一种管理此操作的方法，但您需要为用例准备它。

下载您的图标
Font Awesome为您提供下载图标选项。从以下位置下载“web”版本：https://fontawesome.com/download。解压文件并将其上传到您的服务器。
配置插件
插件需要知道三件事
1. 包含您打算使用的所有类的CSS文件的URL（这仅用于面板，您可以在下载的CSS文件夹中找到它们）
2. 您图标元数据的文件路径（您可以在“metadata”文件夹中找到此信息，查找“icons.yml”文件）
3. 包含精灵图的文件夹的文件路径（这是“sprites”文件夹）
以下是一个示例配置
```
<?php

return [
    'rasteiner.awesome-picker' => [
        'css-url' => function() {
            return url('assets/fontawesome-free-5.15.1-web/css/all.min.css');
        },
        'meta-source' => 'assets/fontawesome-free-5.15.1-web/metadata/icons.yml',
        'sprites-folder' => 'assets/fontawesome-free-5.15.1-web/sprites',
    ]
];
```
您可以将所有这些配置选项指定为字符串或返回字符串的函数。
修改模板
链接的SVG图标需要两个步骤才能工作
1. 通过使用<use xlink:href="#icon-id">标签来使用图标
2. 通过许多<symbol id="icon-id">标签将所有使用的图标嵌入到页面中
此插件提供了一些函数来帮助您完成此操作，它会跟踪已使用的图标，然后注入所有使用项作为符号。为此，您将使用以下方法
1. 使用$field->toIcon()字段方法。这将为您提供“Icon”对象
2. 使用Icon对象的$icon->use($attrs)方法，这将为您提供包含相应<use>标签的SVG元素。此方法可选地允许您指定传递给<svg>标签的属性。
3. 使用$site->iconSymbols()方法，该方法生成一个包含先前使用图标作为<symbol>元素的SVG元素。
以下是一个简短的示例模板
```

<?= $page->myIcon()->toIcon()->use(['class' => 'my-icon-css-class']) ?>


<?= $site->iconSymbols() ?>
```
这将输出类似以下内容
```

<svg class="my-icon-css-class"><use xlink:href="#fas-cloud-sun"></use></svg>


<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="display: none;">
  <symbol id="fas-cloud-sun" viewBox="0 0 640 512">
    <path d="..." />
  </symbol>
</svg>
```
注意：您需要在所有$icon->use()调用之后调用$site->iconSymbols()。因此，您可以将符号放在页面末尾，或者缓冲页面输出。

rasteiner / k3-awesome-picker

维护者

详细信息