tobento/service-icon

管理PHP应用程序的图标。

维护者

详细信息

github.com/tobento-ch/service-icon

主页

源代码

问题

安装: 1

依赖关系: 1

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

1.0.0 2022-11-11 08:16 UTC

Requires

Requires (Dev)

MIT 8e6df387f3ce4190742dc6bab73462b3d154ad0d

packagephpiconsicontobento

This package is not auto-updated.

Last update: 2024-09-28 16:10:20 UTC

README

管理PHP应用程序的图标。

目录

入门

使用以下命令添加正在运行的图标服务项目的最新版本。

composer require tobento/service-icon

要求

  • PHP 8.0或更高版本

亮点

  • 框架无关，适用于任何项目
  • 解耦设计
  • 使用工厂进行自定义以满足您的需求

文档

图标接口

use Tobento\Service\Icon\IconInterface;
use Tobento\Service\Icon\IconFactory;

$icon = (new IconFactory())->createIconFromHtml('download', '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>');

var_dump($icon instanceof IconInterface);
// bool(true)

name

返回图标名称。

var_dump($icon->name());
// string(8) "download"

render

返回图标。

<?= $icon->render() ?>

// or just
<?= $icon ?>

上面的两个图标都会产生以下输出

<span class="icon icon-download">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100">
        <path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/>
    </svg>
</span>

size

返回具有指定大小的新的实例。

$icon = $icon->size('xs');

attr

返回具有指定属性的新的实例。

$icon = $icon->attr(name: 'id', 'some-id');

向现有类中添加类

$icon = $icon->attr(name: 'class', 'foo');

覆盖现有类

$icon = $icon->attr(name: 'class', ['foo']);

label

返回具有指定标签和位置的新的实例。

$icon = $icon->label(text: 'Download');

$icon = $icon->label(text: 'Download', position: 'left');

labelSize

返回具有指定标签大小的新的实例。

$icon = $icon->labelSize('xl');

labelAttr

返回具有指定标签大小的新的实例。

$icon = $icon->labelAttr(name: 'id', 'some-id');

向现有类中添加类

$icon = $icon->labelAttr(name: 'class', 'foo');

覆盖现有类

$icon = $icon->labelAttr(name: 'class', ['foo']);

tag

返回图标标签的新实例。

use Tobento\Service\Tag\TagInterface;

var_dump($icon->tag() instanceof TagInterface);
// bool(true)

查看 标签接口 了解更多关于接口的信息。

图标

use Tobento\Service\Icon\Icon;
use Tobento\Service\Icon\IconInterface;
use Tobento\Service\Tag\Tag;
use Tobento\Service\Tag\TagInterface;
use Tobento\Service\Tag\Attributes;

$icon = new Icon(
    name: 'download',
    tag: new Tag(
        name: 'svg',
        html: '<path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/>',
        attributes: new Attributes([
            'xmlns' => 'http://www.w3.org/2000/svg',
            'width' => '20',
            'height'=> '20',
            'viewBox' => '0 0 100 100',
        ]),
    ),
    labelTag: null, // null|TagInterface
    parentTag: null, // null|TagInterface
);

var_dump($icon instanceof IconInterface);
// bool(true)

您可以查看 标签服务 了解更多信息。

图标工厂接口

使用提供的图标工厂轻松创建图标

use Tobento\Service\Icon\IconFactoryInterface;
use Tobento\Service\Icon\IconFactory;

$iconFactory = new IconFactory();

var_dump($iconFactory instanceof IconFactoryInterface);
// bool(true)

createIcon

use Tobento\Service\Icon\IconInterface;
use Tobento\Service\Icon\CreateIconException;
use Tobento\Service\Tag\Tag;
use Tobento\Service\Tag\TagInterface;
use Tobento\Service\Tag\Attributes;

try {
    $icon = $iconFactory->createIcon(
        name: 'download',
        tag: new Tag(
            name: 'svg',
            html: '<path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/>',
            attributes: new Attributes([
                'xmlns' => 'http://www.w3.org/2000/svg',
                'width' => '20',
                'height'=> '20',
                'viewBox' => '0 0 100 100',
            ]),
        ),
        labelTag: null, // null|TagInterface
        parentTag: null, // null|TagInterface
    );

    var_dump($icon instanceof IconInterface);
    // bool(true)
} catch (CreateIconException $e) {
    // do something
}

createIconFromHtml

use Tobento\Service\Icon\IconInterface;
use Tobento\Service\Icon\CreateIconException;

try {
    $icon = $iconFactory->createIconFromHtml(
        name: 'download',
        html: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>'
    );

    var_dump($icon instanceof IconInterface);
    // bool(true)
} catch (CreateIconException $e) {
    // do something
}

createIconFromFile

use Tobento\Service\Icon\IconInterface;
use Tobento\Service\Icon\CreateIconException;
use Tobento\Service\Filesystem\File;

try {
    $icon = $iconFactory->createIconFromFile(
        name: 'download',
        file: 'path/download.svg' // string|File
    );

    var_dump($icon instanceof IconInterface);
    // bool(true)
} catch (CreateIconException $e) {
    // do something
}

图标工厂

use Tobento\Service\Icon\IconFactoryInterface;
use Tobento\Service\Icon\IconFactory;
use Tobento\Service\Tag\TagFactoryInterface;

$iconFactory = new IconFactory(
    tagFactory: null // null|TagFactoryInterface
);

var_dump($iconFactory instanceof IconFactoryInterface);
// bool(true)

默认图标工厂将生成以下图标输出

$icon = $iconFactory->createIconFromHtml(
    name: 'download',
    html: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/></svg>'
);
    
<?= $icon->size('xs')->label('Download')->labelSize('xl') ?>

output

<span class="icon icon-download text-xs">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100">
        <path d="M0,100H100V90H0ZM100,50H66.67V0H33.33V50H0L50,83.33Z"/>
    </svg>
    <span class="icon-label text-xl">Download</span>
</span>

大小类映射

您可能需要创建自己的工厂来调整CSS大小以满足您的需求

class MyIconFactory extends IconFactory
{
    protected array $sizeClassMap = [
        'xxs' => 'text-xxs',
        'xs' => 'text-xs',
        's' => 'text-s',
        'm' => 'text-m',
        'l' => 'text-l',
        'xl' => 'text-xl',
        'xxl' => 'text-xxl',
        'body' => 'text-body',
    ];
}

图标工厂翻译器

翻译svg <title></title> 标签。您可能需要根据您的需求对其进行增强。

composer require tobento/service-translation

您可以查看 翻译服务 了解更多信息。

use Tobento\Service\Translation\Translator;
use Tobento\Service\Translation\Resources;
use Tobento\Service\Translation\Resource;
use Tobento\Service\Translation\Modifiers;
use Tobento\Service\Translation\MissingTranslationHandler;
use Tobento\Service\Icon\IconFactoryTranslator;
use Tobento\Service\Icon\SvgFileIcons;
use Tobento\Service\Dir\Dirs;
use Tobento\Service\Dir\Dir;

$translator = new Translator(
    new Resources(
        new Resource('*', 'de', [
            'File' => 'Datei',
            'Shopping Cart' => 'Warenkorb',
        ]),
    ),
    new Modifiers(),
    new MissingTranslationHandler(),
    'de',
);

$icons = new SvgFileIcons(
    dirs: new Dirs(new Dir('private/svg-icons/')),
    iconFactory: new IconFactoryTranslator($translator),
);

图标接口

use Tobento\Service\Icon\IconsInterface;
use Tobento\Service\Icon\Icons;
use Tobento\Service\Icon\IconFactory;

$icons = new Icons(new IconFactory());

var_dump($icons instanceof IconsInterface);
// bool(true)

get

use Tobento\Service\Icon\IconInterface;
use Tobento\Service\Icon\IconNotFoundException;

try {
    $icon = $icons->get('download');

    var_dump($icon instanceof IconInterface);
    // bool(true)
} catch (IconNotFoundException $e) {
    // do something
}

has

var_dump($icons->has('download'));
// bool(true)

SVG文件图标

此类从SVG文件创建图标。

private/
    svg-icons/
        download.svg
        ...

use Tobento\Service\Icon\IconsInterface;
use Tobento\Service\Icon\SvgFileIcons;
use Tobento\Service\Dir\Dirs;
use Tobento\Service\Dir\Dir;

$icons = new SvgFileIcons(
    dirs: new Dirs(new Dir('private/svg-icons/'))
);

var_dump($icons instanceof IconsInterface);
// bool(true)

将SVG文件图标转换为JSON文件

此类从SVG文件创建图标，但将所有内容缓存在一个JSON文件中。

use Tobento\Service\Icon\IconsInterface;
use Tobento\Service\Icon\SvgFileIconsToJsonFile;
use Tobento\Service\Dir\Dirs;
use Tobento\Service\Dir\Dir;

$icons = new SvgFileIconsToJsonFile(
    dirs: new Dirs(new Dir('private/svg-icons/')),
    cacheDir: new Dir('private/svg-icons/'),
    clearCache: false, // set true to clear cache.
);

var_dump($icons instanceof IconsInterface);
// bool(true)

将SVG文件图标转换为多个JSON文件

此类从SVG文件创建图标，但将每个图标缓存在一个JSON文件中。

use Tobento\Service\Icon\IconsInterface;
use Tobento\Service\Icon\SvgFileIconsToJsonFiles;
use Tobento\Service\Dir\Dirs;
use Tobento\Service\Dir\Dir;

$icons = new SvgFileIconsToJsonFiles(
    dirs: new Dirs(new Dir('private/svg-icons/')),
    cacheDir: new Dir('private/svg-icons-json/'),
    clearCache: false, // set true to clear cache.
);

var_dump($icons instanceof IconsInterface);
// bool(true)

内存中的HTML图标

use Tobento\Service\Icon\InMemoryHtmlIcons;
use Tobento\Service\Icon\IconFactory;
use Tobento\Service\Icon\IconsInterface;

$icons = new InMemoryHtmlIcons(
    icons: [
        'download' => 'html',
        'cart' => 'html',
    ],
    iconFactory: new IconFactory(),
);

var_dump($icons instanceof IconsInterface);
// bool(true)

图标

此图标类可能用于自定义工厂。

use Tobento\Service\Icon\IconsInterface;
use Tobento\Service\Icon\Icons;
use Tobento\Service\Icon\IconFactory;

$icons = new Icons(
    iconFactory: new IconFactory()
);

var_dump($icons instanceof IconsInterface);
// bool(true)

堆栈图标

StackIcons类允许组合任意数量的其他图标。如果请求的图标在第一个图标集合中不存在，则下一个图标将尝试，依此类推。

use Tobento\Service\Icon\StackIcons;
use Tobento\Service\Icon\SvgFileIcons;
use Tobento\Service\Dir\Dirs;
use Tobento\Service\Dir\Dir;
use Tobento\Service\Icon\InMemoryHtmlIcons;
use Tobento\Service\Icon\IconFactory;
use Tobento\Service\Icon\Icons;
use Tobento\Service\Icon\IconsInterface;

$icons = new StackIcons(
    new SvgFileIcons(
        dirs: new Dirs(new Dir('private/svg-icons/'))
    ),
    new InMemoryHtmlIcons(
        icons: [
            'download' => 'html',
            'cart' => 'html',
        ],
        iconFactory: new IconFactory(),
    ),
    // might be set as fallback as not to throw exception
    // when icon is not found.
    new Icons(new IconFactory()),    
);

var_dump($icons instanceof IconsInterface);
// bool(true)

示例

Font Awesome

这可能是一种创建Font Awesome图标的方法

use Tobento\Service\Icon\IconFactory;
use Tobento\Service\Icon\IconInterface;
use Tobento\Service\Icon\Icons;
use Tobento\Service\Tag\TagInterface;
use Tobento\Service\Tag\Attributes;

$faIconFactory = new class() extends IconFactory
{
    public function createIcon(
        string $name,
        null|TagInterface $tag = null,
        null|TagInterface $labelTag = null,
        null|TagInterface $parentTag = null,
    ): IconInterface {
        
        if (is_null($tag)) {         
            $tag = $this->tagFactory->createTag(
                name: 'i',
                attributes: new Attributes([
                    'class'=> 'fa-solid fa-'.strtolower($name),
                ]),
            );
        }
        
        return parent::createIcon($name, $tag, $labelTag, $parentTag);
    }
};

$icons = new Icons(
    iconFactory: $faIconFactory
);
<?= $icons->get('file')->label('File') ?>

<?= $icons->get('file')->tag()->class('foo') ?>

output

<span class="icon icon-file">
    <i class="fa-solid fa-file"></i>
    <span class="icon-label">File</span>
</span>

<i class="fa-solid fa-file foo"></i>

鸣谢