README

Silverstripe的高级图标字段。它可以处理多达4种不同类型的图标来源

字体图标（CSS文件）
目录（特定文件夹内的图标）
上传文件夹（通过SilverStripe资产模块的文件夹）
json（源文件）

安装

composer require goldfinch/icon-field

可用的Taz命令

如果你之前没有使用过Taz🌪️，则在根项目文件夹中必须存在taz文件cp vendor/goldfinch/taz/taz taz

添加新的图标集

php taz iconset

发布图标模板

php taz vendor:icon-field:templates

快速Bootstrap图标集设置

复制所有当前Bootstrap图标的json集

cp vendor/goldfinch/icon-field/examples/icon-bootstrap.json app/_schema/icon-bootstrap.json

为此集添加配置

Goldfinch\IconField\Forms\IconField:
  icons_sets:
    bootstrap:
      type: font
      source: 'https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css'

使用此集的字段

use Goldfinch\IconField\Forms\IconField;

IconField::create('bootstrap', 'Icon');

用法

use Goldfinch\IconField\Forms\IconField;

class Page
{
    private static $db = [
        'Icon' => 'Icon',
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->insertBefore('Content', IconField::create('icon_set_name', 'Icon'));
    }
}

<!-- template.ss -->

$Icon
$Icon.Key
$Icon.Size(100).Color(green)
$Icon.URL
$Icon.Title
$Icon.IconSetName
$Icon.IconType

Vite支持

如果你使用Vite作为前端构建工具，你可能希望将动态vite链接作为图标源。简单，只需使用前缀vite:后跟文件相对路径，就像你在vite.config.js中一样。

示例

Goldfinch\IconField\Forms\IconField:
  icons_sets:
    my_icons_set:
      type: font
      source: 'vite:themes/main/src/icons.scss'

预览

图标（未加载的集）

图标（加载的集）

演示输出（所有类型）

旁注

如果你的集包含PNG格式的图标，请确保在集配置中设置属性vector: false
当使用dir集类型时，由于.htaccess中的规则，直接在公共文件夹中的图标文件夹（例如：public/my-icons）可能存在访问问题。如果是这种情况，只需将你的图标文件夹移动到assets文件夹（例如：public/assets/my-icons），并更新配置文件中的source参数。

许可

MIT许可（MIT）

goldfinch / icon-field

维护者

详细信息