eminos/statamic-iconify

Statamic 插件，用于在 Statamic 网站中使用 Iconify 图标。

维护者

详细信息

github.com/eminos/statamic-iconify

源代码

问题

安装次数: 1,410

依赖者: 0

建议者: 0

安全: 0

星标: 2

关注者: 1

分支: 0

公开问题: 0

语言：Vue

类型：statamic-addon

v1.3.0 2024-05-27 08:51 UTC

Requires

Requires (Dev)

MIT 59890925f6aa023a15347a81217b0f8b3585e925

This package is auto-updated.

Last update: 2024-09-27 09:44:39 UTC

README

Statamic 插件，用于出色的 Iconify 框架。

此插件在 Statamic 中提供了 Iconify 字段类型，您可以在其中搜索并从 Iconify 提供的庞大图标库中选择图标。

Screenshot of the search and select icon GUI

安装

使用 composer 安装此插件。

composer require eminos/statamic-iconify

功能

  • 搜索 Iconify 图标库。
  • 超过 150,000 个开源图标，按需加载。
  • 使用 Iconify 的 API。 (始终更新的图标集)
  • 您可以选择仅存储所选图标的名称，并在需要时加载它，或者将图标存储为“SVG 数据”并使用提供的 {{ iconify }} Antlers 标签生成 SVG。

用法

根据您选择的图标存储方式，您在前端渲染图标时有几种选择。

仅存储 图标名称。

您可以使用 Iconify 的任何方法/组件来在前端显示图标。以下是一个使用他们的网络组件的示例，该组件通过他们的 API 按需获取图标。

<iconify-icon icon="{{ iconify_field }}"></iconify-icon>

有关如何使用图标的信息，请参阅 Iconify 使用文档。

将图标存储为 SVG 数据。

如果您将图标存储为“SVG 数据”，则可以使用提供的 Antlers 标签渲染 SVG。将图标存储为 SVG 数据（而不是仅存储图标名称）的优点是，在您选择图标后不再需要调用 Iconify 的 API。渲染图标所需的数据存储在您的字段中。

{{ iconify:icon_field }}

将渲染

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72L5.18 9L12 5.28L18.82 9zM17 15.99l-5 2.73l-5-2.73v-3.72L12 15l5-2.73v3.72z"/>
</svg>

您还可以添加其他属性和/或覆盖图标的默认属性 width、height 和 viewBox。

{{ iconify:icon_field class="text-xl" }}

待办事项

  • 使搜索模式更美观。
  • 选择图标时保存 SVG。
  • Statamic 标签用于渲染图标（按需或已保存的 SVG）。
  • 更多过滤选项。例如，限制特定图标供应商或许可证。

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅 许可证文件。