orchid blade-icons
在Blade模板中内联SVG图像的简单方法。
资助包维护!
orchidsoftware
Open Collective
Requires
- ext-dom: *
- laravel/framework: ^10.0|^11.0
Requires (Dev)
- orchestra/testbench: ^8.0|^9.0
Conflicts
- laravel/framework: <10.30
README
此包适用于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); } }