digbang/fonts

为多个(和自定义)来源构建图标的小助手。

v1.0.0 2022-02-23 13:02 UTC

This package is auto-updated.

Last update: 2024-09-23 18:24:33 UTC


README

一个辅助类,用于使用预定义的标记创建字体图标。

安装

通过composer下载

composer require digbang/fonts

将服务提供者和外观添加到您的 config/app.php

'providers' => [
    // ...
    Digbang\Fonts\FontsServiceProvider::class,
    
],

'aliases' => [
    // ...
    'Fonts' => Digbang\Fonts\Facade::class,
],

发布配置文件

php artisan vendor:publish --provider Digbang\\Fonts\\FontsServiceProvider

用法

通过外观

// The `icon` function will use the configured icon prefix (defaults to "fa")
Fonts::icon('icon', 'extra-class') // <i class="fa fa-icon extra-class"></i>

该包提供了“fa”和“mat”作为辅助方法,用于Font AwesomeMaterial Design图标。

Fonts::fa()->icon('icon', ['class' => 'extra-class']) // <i class="fa fa-icon extra-class"></i>
Fonts::mat()->icon('icon', ['class' => 'extra-class']) // <i class="zmdi zmdi-icon extra-class"></i>

通过辅助函数

icon('foo'); // <i class="fa fa-foo"></i>
fa('icon', 'extra-class') // <i class="fa fa-icon extra-class"></i>
mat('icon', ['class' => 'extra-class']) // <i class="mat mat-icon extra-class"></i>

HTML属性

您还可以向HTML添加任何其他属性。

fa('times', ['title' => 'Delete this!']) // <i class="fa fa-times" title="Delete this!"></i>

内部内容

图标可以有内部内容

fa('times', 'text-hide')->withContent("Remove element");

// FontAwesome stacks
fa('stack', 'fa-lg')->withContent(
    fa('circle', 'fa-stack-2x') .
    fa('flag', 'fa-stack-1x fa-inverse')
);

更改标签

您可以更改库使用的标签。

// Setting a new default tag to all fonts
Fonts::setDefaultTag('span');
fa('edit'); // <span class="fa fa-edit"></span>

// Setting a tag on each use
Fonts::fa()->withTag('span')->icon('times'); // <span class="fa fa-times"></span>

扩展工厂

可以使用宏扩展Digbang\Fonts\FontManager

Fonts::macro('digbang', function () {
    return $this->create('db');
});

Fonts::digbang()->icon('foo'); // <i class="db db-foo"></i>

独立使用

非Laravel项目仍然可以使用此工具,但外观和辅助函数将不可用。

$fonts = new Digbang\Fonts\Factory('fa');
$fonts->setDefaultTag('span');

$fonts->icon('times', 'text-danger'); // <span class="fa fa-times text-danger"></span>
$fonts->mat()->icon('times', 'text-danger'); // <span class="mat mat-times text-danger"></span>