theutz/statamic-ant-design-icons

Statamic 插件，允许您使用 Ant Design 图标作为内联 SVG。

维护者

详细信息

github.com/theutz/statamic-ant-design-icons

源代码

问题

安装次数: 339

依赖: 0

建议者: 0

安全: 0

星标: 1

关注者: 2

分支: 0

开放问题: 1

v1.0.0 2021-10-26 19:19 UTC

Requires

  • php: >=7.4

MIT ff51c5afc13c2399c261692227f5bef0eedfbf97

This package is auto-updated.

Last update: 2024-09-27 01:29:08 UTC

README

Statamic Ant Design Icons 是一个插件，允许您使用标签将 Ant Design 系统的 SVG 图标包含在模板中。

功能

此插件执行以下操作

  • 为 Antlers 模板中的 SVG 提供标签。
  • 为内联 SVG 提供添加 CSS 类的属性。
  • 将图标发布到您的网站上作为资源（如果需要的话）

如何安装

您可以在 Statamic 控制面板的“工具 > 插件”部分搜索此插件，然后点击 安装，或者从项目根目录运行以下命令

composer require theutz/statamic-ant-design-icons

如何使用

{{ antdesignicons }} 标签

您可以在模板中使用多种方式来使用 {{ antdesignicons }} 标签。以下示例都将产生相同的结果。

    {{ antdesignicons:check-circle:outlined }}

    <!-- You can use `anticon` as an alias -->

    {{ anticon:check-circle type="outlined" }}

    {{ anticon icon="check-circle" type="outlined" }}

    <!-- outlined is the default icon type, and can be excluded -->

    {{ anticon:check-circle }}

您还可以传递一个类属性来添加到内联 SVG 中。

    {{ antdesignicons:check-circle class="fill-current text-color-400" }}

作为资源

要使用发布的图标作为资源，请执行以下操作

  1. 为资源容器创建一个新的文件系统
// config/filesystems.php
return [
    // ...
    'disks' => [
        // ...
        'antdesignicons' => [
            'driver' => 'local',
            'root' => public_path('vendor/statamic-ant-design-icons'),
            'url' => env('APP_URL') . '/vendor/statamic-ant-design-icons',
            'visibility' => 'public'
        ]
    ],
];
  1. 为图标设置一个新的资源容器
# content/assets/ant_design_icons.yml
title: "Ant Design Icons"
disk: antdesignicons
allow_uploads: false
allow_downloading: true
allow_renaming: false
allow_moving: false
create_folders: false
  1. 享受吧！