orchidblade-icons

在Blade模板中内联SVG图像的简单方法。

4.2.0 2024-07-21 21:48 UTC

This package is auto-updated.

Last update: 2024-09-21 22:22:29 UTC


README

Packagist Packagist Version

此包适用于Laravel框架,允许您使用Blade组件插入内联SVG图像。

安装

要安装此包,请在命令行中运行以下命令

$ composer require orchid/blade-icons

基本用法

要使用服务提供者注册包含文件的目录,请使用以下代码

namespace App\Providers;

use Orchid\Icons\IconFinder;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(IconFinder $iconFinder) : void
    {
        $iconFinder->registerIconDirectory('fa', storage_path('app/fontawesome'));
    }
}

调用目录方法时,我们传递第一个参数作为调用图标的前缀,第二个参数是它们所在的目录。

之后,我们可以在Blade模板中调用组件

<x-orchid-icon path="fa.home" />

如果您使用一组或两组合并的图标(不重复),则不需要在组件中指定前缀

<x-orchid-icon path="home" />

您还可以列出应应用于图标的某些属性

<x-orchid-icon 
    path="home" 
    class="icon-big" 
    width="2em" 
    height="2em" />

从PHP类中的静态调用

IconComponent::make(
    path: 'fa.home',
    id: 101,
    class: 'red',
);

默认大小

如果您使用来自同一集合的图标,指定默认大小值是有意义的

namespace App\Providers;

use Orchid\Icons\IconFinder;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(IconFinder $iconFinder) : void
    {
        $iconFinder
            ->registerIconDirectory('fa', storage_path('app/fontawesome'))
            ->setSize('54px', '54px');
    }
}

如果您使用不同的集合,例如在应用程序的公共部分和后台面板中,那么您可以在中间件中动态更改该值

namespace App\Http\Middleware;
 
use Closure;
use Orchid\Icons\IconFinder;
 
class ExampleMiddleware
{
    /**
     * @var \Orchid\Icons\IconFinder 
     */
    protected $iconFinder;

    /**
     * ExampleMiddleware constructor.
     *
     * @param IconFinder $iconFinder
     */
    public function __construct(IconFinder $iconFinder)
    {
        $this->iconFinder = $iconFinder;
    }

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    { 
        $iconFinder->setSize('54px', '54px');

        return $next($request);
    }
}