README

为 ACF 提供高级 SVG 图标字段

安装

使用 composer 安装

composer require agence-adeliom/acf-icon-field

用法/示例

使用 Font Awesome Pro 替代免费版

1. 更改 Font Awesome 注册

add_filter( 'acf/icon_field/register_font-awesome', function() {
    return "pro";
});

1. 根据文档将 Font Awesome SVG Sprites 复制到您的主题文件夹 resources/icons/fa/

├── resources
│   ├── icons
│   │   ├── fa
│   │   │   ├── brands.svg
│   │   │   ├── duotone.svg
│   │   │   ├── light.svg
│   │   │   ├── regular.svg
│   │   │   ├── sharp-light.svg
│   │   │   ├── sharp-regular.svg
│   │   │   ├── sharp-solid.svg
│   │   │   ├── sharp-thin.svg
│   │   │   ├── solid.svg
│   │   │   ├── thin.svg

自定义库

$library = new \ACF_icon_library("<LIBRARY_LABEL>", "<LIBRARY_NAME>");

$library->setResolver(string $url); // URL to resolve your icon
// Placeholders :
//
// {{assetPath}} - Path to your theme root
// {{library}} - Library name
// {{subset}} - Subset key
// {{name}} - Icon name

$library->setSpritesheet(bool $support); // (default) false, Enable support for SVG Sprites

$library->addSubset(string $id, string $name = '', string $prefix = ''); // Append a subset with prefix to your library

$library->addIcon(string $id, string $name = '', ?string $subset = null, string $prefix = ''); // Append an icon to your library

示例

添加 Heroicons 库

$library = new \ACF_icon_library("Heroicons", "heroicons");
$library->setResolver("https://cdn.jsdelivr.net.cn/npm/heroicons@2.0.18/24/{{subset}}/{{name}}.svg");

// Add subsets
$library->addSubset("solid", "Solid");
$library->addSubset("outline", "Outline", "o");

// Add Solid Icons
$library->addIcon('chat-bubble-left', "Chat bubble on left", "solid");
$library->addIcon('cloud', "Cloud", "solid");
$library->addIcon('cog', "Cog", "solid");
$library->addIcon('document-text', "Text document", "solid");
$library->addIcon('gift', "Gift", "solid");
$library->addIcon('speaker-wave', "Speaker wave", "solid");

// Add Outline Icons
$library->addIcon('chat-bubble-left', "Chat bubble on left", "outline", "o");
$library->addIcon('cloud', "Cloud", "outline", "o");
$library->addIcon('cog', "Cog", "outline", "o");
$library->addIcon('document-text', "Text document", "outline", "o");
$library->addIcon('gift', "Gift", "outline", "o");
$library->addIcon('speaker-wave', "Speaker wave", "outline", "o");

将 Heroicons 库添加到注册表中

add_filter( 'acf/icon_field/registry', function( \ACF_icon_registry $registry ) use ($library) {
    $registry->addLibrary($library); // To add a new library
    return $registry;
}, 10, 1 );

钩子

禁用默认图标集

add_filter( 'acf/icon_field/register_default', function( bool $register ) {
    $register = false;
    return $register;
}, 10, 1 );

更改/禁用 Font Awesome 图标集

add_filter( 'acf/icon_field/register_font-awesome', function( $register ) {
    $register = "free"; // (default) To enable Font Awesome Free
    $register = "pro"; // To enable Font Awesome Pro via an SVG Sprite sheet
    $register = false; // To disable Font Awesome
    
    return $register;
}, 10, 1 );

自定义图标库注册表

add_filter( 'acf/icon_field/registry', function( \ACF_icon_registry $registry ) {
        
    $library = new \ACF_icon_library("Lorem", "lo");
    ...
    
    $registry->addLibrary($library); // To add a new library
    $registry->removeLibrary('fa'); // To remove a library
    $registry->getLibraries(); // Get all libraries
    $registry->getLibrary(); // Get one library
    
    return $registry;
}, 10, 1 );

禁用缓存优化

add_filter( 'acf/icon_field/use_cache', '__return_false');

许可协议

MIT

作者

• @arnaud-ritti