feat(font awesome 6): implemented icon stacks

Author: Jonnx

app/Http/Controllers/DocumentationController.php

@@ -49,6 +49,11 @@ public function fontAwesomeV6Icons()
         return view('docs.font-awesome.v6.icons');
     }
 
+    public function fontAwesomeV6IconStacks()
+    {
+        return view('docs.font-awesome.v6.icon-stacks');
+    }
+
     public function fontAwesomeV5()
     {
         return view('docs.font-awesome.v5.index');

resources/views/components/docs-layout.blade.php

@@ -16,6 +16,7 @@
                         <div class="ml-2">
                             <a href="/documentation/font-awesome/v6" class="block mb-1">Overview</a>
                             <a href="/documentation/font-awesome/v6/icons" class="block mb-1">Icons</a>
+                            <a href="/documentation/font-awesome/v6/icon-stacks" class="block mb-1">Icon Stacks</a>
                         </div>
                     </div>
 

resources/views/docs/font-awesome/v6/icon-stacks.blade.php

@@ -0,0 +1,26 @@
+@extends('layouts.app-nav')
+
+@section('content')
+    <x-docs-layout>
+        <div class="grid grid-cols-3 gap-8">
+            <div class="col-span-3">
+                <x-docs-box>
+                    <h2>Icon Stacks</h2>
+                    <p>You can generate complex icons to convey importan attributes when rendering lots of data on a map.
+                        This will help improve your users understanding of what is going on when lots of things are moving.
+                    </p>
+                    <x-marker-creator endpoint="/api/v3/font-awesome/v6/icon-stack" :fields="[
+                        'size',
+                        'icon' => ['value' => 'fa-solid fa-map-pin'],
+                        'iconsize' => ['value' => 35],
+                        'color' => ['value' => '8F2BDB'],
+                        'on' => ['value' => 'fa-solid fa-map'],
+                        'oncolor' => ['value' => 'BC5AF4'],
+                        'hoffset' => ['value' => 0],
+                        'voffset' => ['value' => 0],
+                    ]" />
+                </x-docs-box>
+            </div>
+        </div>
+    </x-docs-layout>
+@endsection

resources/views/docs/font-awesome/v6/index.blade.php

@@ -66,12 +66,12 @@
         </div>
 
         {{-- ICON STACKS --}}
-          {{-- PINS --}}
-          <div class="prose prose-invert text-center pt-10">
+        {{-- PINS --}}
+        <div class="prose prose-invert text-center pt-10">
             <div class="mb-4">
-                <img src="/api/v3/font-awesome/v6/icon?icon=fa-solid+fa-users&color=992DE5&size=50" class="inline h-12 m-0 mx-1" />
-                <img src="/api/v3/font-awesome/v6/icon?icon=fa-solid+fa-box&color=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
-                <img src="/api/v3/font-awesome/v6/icon?icon=fa-solid+fa-wind&color=CE86F5&size=50" class="inline-block h-12 m-0 mx-1" />
+                <img src="/api/v3/font-awesome/v6/icon-stack?size=64&icon=fa-solid+fa-map-pin&color=171719&on=fa-solid+fa-map&oncolor=992DE5&iconsize=20&hoffset=23&voffset=7" class="inline h-12 m-0 mx-1" />
+                <img src="/api/v3/font-awesome/v6/icon-stack?size=64&icon=fa-brands+fa-amazon&color=171719&on=fa-solid+fa-truck&oncolor=BC5AF4&iconsize=30&voffset=-6&hoffset=-11" class="inline h-12 m-0 mx-1" />
+                <img src="/api/v3/font-awesome/v6/icon-stack?size=64&icon=fa-brands+fa-apple&color=171719&on=fa-solid+fa-box&oncolor=CE86F5&iconsize=25&voffset=10" class="inline h-12 m-0 mx-1" />
             </div>
             <div class="prose">
                 <h3 class="text-white">Icon Stacks</h3>

routes/web.php

@@ -47,6 +47,7 @@
         Route::group(['prefix' => 'v6'], function () {
             Route::get('/', [DocumentationController::class, 'fontAwesomeV6']);
             Route::get('/icons', [DocumentationController::class, 'fontAwesomeV6Icons']);
+            Route::get('/icon-stacks', [DocumentationController::class, 'fontAwesomeV6IconStacks']);
         });
 
         Route::group(['prefix' => 'v5'], function () {