feat(docs): updated homepage / docs components to use new svg icons

mapmarker · Nov 6, 2023 · a436340 · a436340
1 parent 13807a8
commit a436340
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 27 deletions.
diff --git a/resources/views/components/icon-spectrum.blade.php b/resources/views/components/icon-spectrum.blade.php
@@ -1,10 +1,10 @@
 <div {{ $attributes->merge(['class' => 'mb-4']) }}>
-    <img src="/api/v2/font-awesome/v5/icon?icon={{ isset($icon) ? $icon : 'fa-play-circle-regular' }}&size=50&color=6013CC"
+    <img src="/api/v3/font-awesome/v6/icon?icon={{ isset($icon) ? $icon : 'fa-solid fa-circle-play' }}&size=50&color=6013CC"
         class="m-0 inline h-12 {{ isset($iconClass) ? $iconClass : '' }}" />
-    <img src="/api/v2/font-awesome/v5/icon?icon={{ isset($icon) ? $icon : 'fa-play-circle-regular' }}&size=50&color=992DE5"
+    <img src="/api/v3/font-awesome/v6/icon?icon={{ isset($icon) ? $icon : 'fa-solid fa-circle-play' }}&size=50&color=992DE5"
         class="m-0 inline h-12 {{ isset($iconClass) ? $iconClass : '' }}" />
-    <img src="/api/v2/font-awesome/v5/icon?icon={{ isset($icon) ? $icon : 'fa-play-circle-regular' }}&size=50&color=BC5AF4"
+    <img src="/api/v3/font-awesome/v6/icon?icon={{ isset($icon) ? $icon : 'fa-solid fa-circle-play' }}&size=50&color=BC5AF4"
         class="m-0 inline h-12 {{ isset($iconClass) ? $iconClass : '' }}" />
-    <img src="/api/v2/font-awesome/v5/icon?icon={{ isset($icon) ? $icon : 'fa-play-circle-regular' }}&size=50&color=CE86F5"
+    <img src="/api/v3/font-awesome/v6/icon?icon={{ isset($icon) ? $icon : 'fa-solid fa-circle-play' }}&size=50&color=CE86F5"
         class="m-0 inline h-12 {{ isset($iconClass) ? $iconClass : '' }}" />
 </div>
diff --git a/resources/views/docs/font-awesome/v4/index.blade.php b/resources/views/docs/font-awesome/v4/index.blade.php
@@ -5,7 +5,7 @@
         <div class="md:grid grid-cols-3 gap-8">
             <div class="col-span-3">
                 <x-docs-box>
-                    <x-icon-spectrum icon="fa-fort-awesome" class="opacity-40" iconClass="-mr-12 w-[49px]" />
+                    <x-icon-spectrum icon="fa-brands fa-fort-awesome" iconClass="-mr-12 w-[49px]" />
 
                     <h2>Font Awesome 4</h2>
 

diff --git a/resources/views/docs/font-awesome/v5/index.blade.php b/resources/views/docs/font-awesome/v5/index.blade.php
@@ -5,7 +5,7 @@
         <div class="md:grid grid-cols-3 gap-8">
             <div class="col-span-3">
                 <x-docs-box>
-                    <x-icon-spectrum icon="fa-fort-awesome" class="opacity-40" iconClass="-mr-12 w-[49px]" />
+                    <x-icon-spectrum icon="fa-brands fa-fort-awesome" iconClass="-mr-12 w-[49px]" />
 
                     <h2>Font Awesome 5</h2>
 

diff --git a/resources/views/docs/font-awesome/v6/index.blade.php b/resources/views/docs/font-awesome/v6/index.blade.php
@@ -6,12 +6,7 @@
     <div class="md:grid grid-cols-3 gap-8">
         <div class="col-span-3">
             <x-docs-box>
-                <div class="mb-4">
-                    <img src="/api/v3/font-awesome/v6/icon?icon=fa-brands+fa-fort-awesome&size=50&color=6013CC" class="m-0 inline h-12 -mr-12 w-[49px]" />
-                    <img src="/api/v3/font-awesome/v6/icon?icon=fa-brands+fa-fort-awesome&&size=50&color=992DE5" class="m-0 inline h-12 -mr-12 w-[49px]" />
-                    <img src="/api/v3/font-awesome/v6/icon?icon=fa-brands+fa-fort-awesome&&size=50&color=BC5AF4" class="m-0 inline h-12 -mr-12 w-[49px]" />
-                    <img src="/api/v3/font-awesome/v6/icon?icon=fa-brands+fa-fort-awesome&&size=50&color=CE86F5" class="m-0 inline h-12 -mr-12 w-[49px]" />
-                </div>
+                <x-icon-spectrum icon="fa-brands fa-fort-awesome" iconClass="-mr-12 w-[49px]" />
 
 
                 <h2>Font Awesome 6</h2>

diff --git a/resources/views/docs/index.blade.php b/resources/views/docs/index.blade.php
@@ -4,7 +4,7 @@
     <x-docs-layout>
 
         <x-docs-box>
-            <x-icon-spectrum icon="fa-rocket" class="opacity-40" iconClass="-mr-12 w-[49px]" />
+            <x-icon-spectrum icon="fa-solid fa-rocket" iconClass="-mr-12 w-[49px]" />
 
             <h2> Getting Started</h2>
 

diff --git a/resources/views/docs/integrations/index.blade.php b/resources/views/docs/integrations/index.blade.php
@@ -5,7 +5,7 @@
         <div class="md:grid grid-cols-3 gap-8">
             <div class="col-span-3 mb-8 md:mb-0">
                 <x-docs-box>
-                    <x-icon-spectrum icon="fa-cog" class="opacity-40" iconClass="-mr-12 w-[49px]" />
+                    <x-icon-spectrum icon="fa-solid fa-gear" iconClass="-mr-12 w-[49px]" />
 
                     <h2>Integrations</h2>
 

diff --git a/resources/views/docs/versions.blade.php b/resources/views/docs/versions.blade.php
@@ -4,7 +4,7 @@
     <x-docs-layout>
 
         <x-docs-box class="mb-8">
-            <x-icon-spectrum icon="fa-boxes" class="opacity-40" iconClass="-mr-12 w-[49px]" />
+            <x-icon-spectrum icon="fa-solid fa-boxes-stacked" iconClass="-mr-12 w-[49px]" />
 
             <h2>API Versions</h2>
 

diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
@@ -19,53 +19,53 @@
             {{-- PINS --}}
             <div class="prose prose-invert text-center pt-10 pb-4">
                 <div class="-mb-4">
-                    <img src="/api/v2/font-awesome/v5/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 mx-1" />
-                    <img src="/api/v2/font-awesome/v5/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
-                    <img src="/api/v2/font-awesome/v5/pin?icon=fa-star-solid&background=CE86F5&size=50"
+                    <img src="/api/v3/font-awesome/v6/pin?text=A&background=992DE5&size=50" class="inline h-12 m-0 mx-1" />
+                    <img src="/api/v3/font-awesome/v6/pin?text=AC&background=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
+                    <img src="/api/v3/font-awesome/v6/pin?icon=fa-solid+fa-star&background=CE86F5&size=50"
                         class="inline-block h-12 m-0 mx-1" />
                 </div>
                 <x-markdown>
                     ### Pins
                     Create pins that look native to any map but contain more contextual information for your users.
                 </x-markdown>
-                <a href="/documentation/font-awesome/v5/pins"
+                <a href="/documentation/font-awesome/v6/pins"
                     class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     Get Started
                 </a>
             </div>
             {{-- ICONS --}}
             <div class="prose prose-invert text-center pt-10 pb-4">
                 <div class="-mb-4">
-                    <img src="/api/v2/font-awesome/v5/icon?icon=fa-users&color=992DE5&size=50"
+                    <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/v2/font-awesome/v5/icon?icon=fa-box&color=BC5AF4&size=50" class="inline h-12 m-0 mx-1" />
-                    <img src="/api/v2/font-awesome/v5/icon?icon=fa-wind&color=CE86F5&size=50"
+                    <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" />
                 </div>
                 <x-markdown>
                     ### Icons
                     When simplicity and a minimal look are the goal. Simple icons as map markers are a good go-to.
                 </x-markdown>
-                <a href="/documentation/font-awesome/v5/icons"
+                <a href="/documentation/font-awesome/v6/icons"
                     class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     Get Started
                 </a>
             </div>
             {{-- ICON STACKS --}}
             <div class="prose prose-invert text-center pt-10 pb-4">
                 <div class="-mb-4">
-                    <img src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-map-marker-alt&color=171719&on=fa-map-solid&oncolor=992DE5&iconsize=14&hoffset=21&voffset=8"
+                    <img src="/api/v3/font-awesome/v6/icon-stack?size=64&icon=fa-solid+fa-location&color=171719&on=fa-solid+fa-map&oncolor=992DE5&iconsize=14&hoffset=23&voffset=8"
                         class="inline h-12 m-0 mx-1" />
-                    <img src="/api/v2/font-awesome/v5/icon-stack?size=64&icon=fa-amazon&color=171719&on=fa-truck&oncolor=BC5AF4&iconsize=30&voffset=-6&hoffset=-11"
+                    <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/v2/font-awesome/v5/icon-stack?size=64&icon=fa-apple&color=171719&on=fa-box&oncolor=CE86F5&iconsize=25&voffset=10"
+                    <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>
                 <x-markdown>
                     ### Icon Stacks
                     You can layer your favorite icons to create unique icons tailored to your application and branding.
                 </x-markdown>
-                <a href="/documentation/font-awesome/v5/icon-stacks"
+                <a href="/documentation/font-awesome/v6/icon-stacks"
                     class="no-underline -mb-4 mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     Get Started
                 </a>