v5 support (#23)

* Prefix SVG tag attributes

* Update composer.json

* Support v4 and v5

Author: robdekort

composer.json

@@ -18,6 +18,6 @@
     },
     "require": {
         "laravel/prompts": "^0.1",
-        "statamic/cms": "^4.0"
+        "statamic/cms": "^4.0 || ^5.0"
     }
 }

resources/stubs/presets/banner/banner.antlers.html.stub

@@ -17,7 +17,7 @@
             {{ /partial:typography/prose }}
 
             <button class="outline-white" aria-label="{{ trans:strings.banner_close }}" @click="visible = false">
-                {{ svg:close class="w-4 h-4 fill-white" aria-hidden="true" }}
+                {{ svg:close attr:class="w-4 h-4 fill-white" attr:aria-hidden="true" }}
             </button>
         </div>
     </section>

resources/stubs/presets/business_hours/call_now.antlers.html.stub

@@ -22,7 +22,7 @@
         x-cloak
     >
         <span class="text-neutral-500">{{ business_hours:label }}</span>
-        {{ svg:phone class="w-4 h-4 fill-current" aria-hidden="true" }}
+        {{ svg:phone attr:class="w-4 h-4 fill-current" attr:aria-hidden="true" }}
         <span class="">{{ business_hours:phone_number }}</span>
         <span x-show="open" class="w-3 h-3 rounded-full bg-green-600"></span>
         <span x-show="closed" class="w-3 h-3 rounded-full bg-red-600"></span>

resources/stubs/presets/pricing/resources/views/page_builder/_features.antlers.html.stub

@@ -77,14 +77,14 @@
                                                 <p class="sr-only">{{ trans:strings.pricing_included_sr :tier="title" }}</p>
 
                                                 <div class="w-6 h-6 flex justify-center items-center rounded-full bg-green-200" aria-hidden="true">
-                                                    {{ svg:check class="w-3 h-3 fill-green-900" }}
+                                                    {{ svg:check attr:class="w-3 h-3 fill-green-900" }}
                                                 </div>
                                             {{ /if }}
                                         {{ else }}
                                             <p class="sr-only">{{ trans:strings.pricing_excluded_sr :tier="title" }}</p>
 
                                             <div class="w-6 h-6 flex justify-center items-center rounded-full bg-gray-200" aria-hidden="true">
-                                                {{ svg:cross class="w-2 h-2 fill-gray-900" }}
+                                                {{ svg:cross attr:class="w-2 h-2 fill-gray-900" }}
                                             </div>
                                         {{ /if }}
                                     </div>

resources/stubs/presets/search/search.antlers.html.stub

@@ -19,7 +19,7 @@
             <input class="w-full pr-10 rounded border-neutral caret-primary focus-visible:ring-primary" placeholder="{{ trans:strings.search }}" type="search" value="{{ get:q }}" name="q"/>
 
             <button class="absolute inset-y-0 right-0 flex mr-1 items-center text-neutral hover:text-primary rounded" aria-label="{{ trans:strings.search }}">
-                {{ svg:search class="w-5 h-5 fill-current motion-safe:transition-colors" alt="" aria-hidden="true" }}
+                {{ svg:search attr:class="w-5 h-5 fill-current motion-safe:transition-colors" attr:alt="" attr:aria-hidden="true" }}
             </button>
         </form>
 

resources/stubs/presets/search/search_form.antlers.html.stub

@@ -26,7 +26,7 @@
             : '{{ trans:strings.search_open }}'"
         :aria-expanded="open"
     >
-        {{ svg:search class="w-5 h-5 fill-current motion-safe:transition-colors" alt="" aria-hidden="true" }}
+        {{ svg:search attr:class="w-5 h-5 fill-current motion-safe:transition-colors" attr:alt="" attr:aria-hidden="true" }}
     </button>
 
     <form
@@ -51,7 +51,7 @@
             :disabled="value.length === 0"
             :class="{ 'opacity-25 cursor-default': value.length === 0, 'opacity-100': value.length > 0 }"
         >
-            {{ svg:search class="w-5 h-5 fill-current motion-safe:transition-colors" alt="" aria-hidden="true" }}
+            {{ svg:search attr:class="w-5 h-5 fill-current motion-safe:transition-colors" attr:alt="" attr:aria-hidden="true" }}
         </button>
     </form>
 </li>

resources/stubs/presets/theme_toggle/theme_toggle.antlers.html.stub

@@ -13,14 +13,14 @@
     >
         {{ icon_classes = 'w-4 h-4 stroke-current overflow-visible' }}
         <div x-show="$store.theme.get() === 'light'">
-            {{ svg:sun class="{icon_classes}" alt="" aria-hidden="true" }}
+            {{ svg:sun attr:class="{icon_classes}" attr:alt="" attr:aria-hidden="true" }}
         </div>
         <div x-show="$store.theme.get() === 'dark'">
-            {{ svg:moon class="{icon_classes}" alt="" aria-hidden="true" }}
+            {{ svg:moon attr:class="{icon_classes}" attr:alt="" attr:aria-hidden="true" }}
         </div>
         <div x-show="$store.theme.get() === 'system'">
-            {{ svg:sun x-show="preferredColorScheme === 'light'" class="{icon_classes} opacity-50" alt="" aria-hidden="true" }}
-            {{ svg:moon x-show="preferredColorScheme === 'dark'" class="{icon_classes} opacity-50" alt="" aria-hidden="true" }}
+            {{ svg:sun attr:x-show="preferredColorScheme === 'light'" attr:class="{icon_classes} opacity-50" attr:alt="" attr:aria-hidden="true" }}
+            {{ svg:moon attr:x-show="preferredColorScheme === 'dark'" attr:class="{icon_classes} opacity-50" attr:alt="" attr:aria-hidden="true" }}
         </div>
     </button>
     <div
@@ -38,7 +38,7 @@
             title="{{ trans:strings.theme_toggle_light }}"
             class="{{ button_classes }}"
         >
-            {{ svg:sun class="{icon_classes}" alt="" aria-hidden="true" }}
+            {{ svg:sun attr:class="{icon_classes}" attr:alt="" attr:aria-hidden="true" }}
             <span class="{{ label_classes }}">{{ trans:strings.theme_toggle_light_short }}</span>
         </button>
         <button
@@ -48,7 +48,7 @@
             title="{{ trans:strings.theme_toggle_dark }}"
             class="{{ button_classes }}"
         >
-            {{ svg:moon class="{icon_classes}" alt="" aria-hidden="true" }}
+            {{ svg:moon attr:class="{icon_classes}" attr:alt="" attr:aria-hidden="true" }}
             <span class="{{ label_classes }}">{{ trans:strings.theme_toggle_dark_short }}</span>
         </button>
         <button
@@ -58,7 +58,7 @@
             title="{{ trans:strings.theme_toggle_system }}"
             class="{{ button_classes }}"
         >
-            {{ svg:cog class="{icon_classes}" alt="" aria-hidden="true" }}
+            {{ svg:cog attr:class="{icon_classes}" attr:alt="" attr:aria-hidden="true" }}
             <span class="{{ label_classes }}">{{ trans:strings.theme_toggle_system_short }}</span>
         </button>
     </div>