digbang / fonts
为多个(和自定义)来源构建图标的小助手。
v1.0.0
2022-02-23 13:02 UTC
Requires
- php: ^7.4 || ^8.0.2
- illuminate/support: ^8.0 || ^9.0
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 Awesome和Material 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>