qaslan/icons

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

1.0.0 2023-02-17 21:41 UTC

This package is auto-updated.

Last update: 2024-09-18 02:21:53 UTC


README

简介

这是一个 Laravel 框架的包,允许您使用 Blade 组件插入内联 SVG 图像。

安装

在命令行运行以下命令

$ composer require qaslan/blade-icons

这将更新 composer.json 并将包安装到 vendor/ 目录。

基本用法

在服务提供者中注册包含文件的目录

namespace App\Providers;

use Qaslan\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-qaslan-icon path="fa.home" />

如果您使用的是一组或两组不重复的图标,则无需在组件中指定前缀

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

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

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

默认大小

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

namespace App\Providers;

use Qaslan\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 Qaslan\Icons\IconFinder;
 
class ExampleMiddleware
{
    /**
     * @var \Qaslan\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);
    }
}

许可证

MIT 许可证(MIT)。有关更多信息,请参阅 许可证文件