adding new layouts and updating AppLayout

src/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+### Added
+- 
+
+### Changed
+- 
+
+### Removed
+- 
+
+
+## [1.0.0] - 20XX-01-01
+### Added
+- 
+
+### Changed
+- 
+
+### Removed
+- 

src/composer.json

@@ -11,6 +11,7 @@
         "laravel/scout": "", // full-text search to Eloquent models
         "meilisearch/meilisearch-php": "", // use Meilisearch for Scout funtionality
         "http-interop/http-factory-guzzle": "", // use Meilisearch for Scout funtionality
+        "dwarfdk/laravel-meilitools": "", // additional tools for Meilisearch (https://github.com/dwarfhq/laravel-meilitools)
 
         // Roles / Permissions
         "spatie/laravel-permission": "",
@@ -63,6 +64,8 @@
         "phpstan/phpstan": "",
         "psalm/plugin-laravel": "",
         "vimeo/psalm": "",
+        "slevomat/coding-standard": "^8.5", // additional coding standards to match Laravel
+        "squizlabs/php_codesniffer": "^3.7"
     },
     //...
     "autoload": {

src/helpers/global_functions.php

@@ -1,6 +1,6 @@
 <?php
 
-/*
+/**
 |--------------------------------------------------------------------------
 | Global Functions
 |--------------------------------------------------------------------------
@@ -94,25 +94,25 @@ if (! function_exists('is_serialized')) {
         }
 
         $data = trim($data);
-        if ('N;' === $data) {
+        if ($data === 'N;') {
             return true;
         }
         if (strlen($data) < 4) {
             return false;
         }
-        if (':' !== $data[1]) {
+        if ($data[1] !== ':') {
             return false;
         }
         if ($strict) {
             $lastc = substr($data, -1);
-            if (';' !== $lastc && '}' !== $lastc) {
+            if ($lastc !== ';' && $lastc !== '}') {
                 return false;
             }
         } else {
             $semicolon = strpos($data, ';');
-            $brace     = strpos($data, '}');
+            $brace = strpos($data, '}');
             // Either ; or } must exist.
-            if (!$semicolon && !$brace) {
+            if (! $semicolon && ! $brace) {
                 return false;
             }
             // But neither must be in the first X characters.
@@ -127,10 +127,10 @@ if (! function_exists('is_serialized')) {
         switch ($token) {
             case 's':
                 if ($strict) {
-                    if ('"' !== substr($data, -2, 1)) {
+                    if (substr($data, -2, 1) !== '"') {
                         return false;
                     }
-                } elseif (!strpos($data, '"')) {
+                } elseif (! strpos($data, '"')) {
                     return false;
                 }
                 // Or else fall through.
@@ -162,44 +162,93 @@ if (! function_exists('maybe_unserialize')) {
      */
     function maybe_unserialize($data)
     {
-        if (is_serialized($data)) { // Don't attempt to unserialize data that wasn't serialized going in.
-            return @unserialize(trim($data));
+        if (! is_string($data)) {
+            return false;
+        }
+
+        $data = trim($data);
+        // Don't attempt to unserialize data that wasn't serialized going in.
+        if (is_serialized($data)) {
+            return unserialize(trim($data));
         }
         return $data;
     }
 }
 
-if (! function_exists('cel2Fah')) {
+/**
+ |--------------------------------------------------------------------------
+ | Metric functions
+ |--------------------------------------------------------------------------
+ | Functions that convert from metric to imperial or from a smaller
+ | metric unit to a larger one.
+ |
+ */
+
+if (! function_exists('centimeters2Inches')) {
     /**
-     * Convert from celsius to fahrenheit.
+     * Convert from centimeters to inches.
      *
      * @since 1.0.0
      *
-     * @param float|int|string $celsius
+     * @param float|int|string $centimeters
      * @param int $precision
      *
      * @return float
      */
-    function cel2Fah($celsius, int $preceision = 0): float
+    function centimeters2Inches($centimeters, int $preceision = 1): float
     {
-        return round((($celsius * (9/5)) + 32), $preceision);
+        return round(($centimeters / 2.54), $preceision);
     }
 }
 
-if (! function_exists('fah2Cel')) {
+if (! function_exists('centimeters2Feet')) {
     /**
-     * Convert from fahrenheit to celsius.
+     * Convert from centimeters to inches.
      *
      * @since 1.0.0
      *
-     * @param float|int|string $fahrenheit
+     * @param float|int|string $centimeters
      * @param int $precision
      *
      * @return float
      */
-    function fah2Cel($fahrenheit, int $preceision = 1): float
+    function centimeters2Feet($centimeters, int $preceision = 1): float
     {
-        return round(($fahrenheit - 32 * (5/9)), $preceision);
+        return round((($centimeters / 2.54) * 12), $preceision);
+    }
+}
+
+if (! function_exists('centimeters2Meters')) {
+    /**
+     * Convert from centimeters to meters.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $centimeters
+     * @param int $precision
+     *
+     * @return float
+     */
+    function centimeters2Meters($centimeters, int $preceision = 1): float
+    {
+        return round(($centimeters / 100), $preceision);
+    }
+}
+
+if (! function_exists('centimeters2Yards')) {
+    /**
+     * Convert from centimeters to yards.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $centimeters
+     * @param int $precision
+     *
+     * @return float
+     */
+    function centimeters2Yards($centimeters, int $preceision = 1): float
+    {
+        return round(($centimeters / 91.44), $preceision);
     }
 }
 
@@ -237,7 +286,7 @@ if (! function_exists('kilometers2Miles')) {
     }
 }
 
-if (! function_exists('m2Km')) {
+if (! function_exists('meters2Kilometers')) {
     /**
      * Convert from meters to kilometers.
      *
@@ -248,29 +297,148 @@ if (! function_exists('m2Km')) {
      *
      * @return float
      */
-    function m2Km($meters, int $preceision = 1): float
+    function meters2Kilometers($meters, int $preceision = 1): float
     {
         return round(($meters / 1000), $preceision);
     }
 }
 
-if (! function_exists('mm2Inches')) {
+if (! function_exists('celsius2Fahrenheit')) {
     /**
-     * Convert from milimeters to inches.
+     * Convert from celsius to fahrenheit.
      *
      * @since 1.0.0
      *
-     * @param float|int|string $milimeters
+     * @param float|int|string $celsius
      * @param int $precision
      *
      * @return float
      */
-    function mm2Inches($milimeters, int $preceision = 1): float
+    function celsius2Fahrenheit($celsius, int $preceision = 0): float
     {
-        return round(($milimeters / 25.4), $preceision);
+        return round((($celsius * (9/5)) + 32), $preceision);
     }
 }
 
+if (! function_exists('millimeters2Inches')) {
+    /**
+     * Convert from millimeters to inches.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $millimeters
+     * @param int $precision
+     *
+     * @return float
+     */
+    function millimeters2Inches($millimeters, int $preceision = 1): float
+    {
+        return round(($millimeters / 25.4), $preceision);
+    }
+}
+
+/**
+ |--------------------------------------------------------------------------
+ | Imperial functions
+ |--------------------------------------------------------------------------
+ | Functions that convert from imperial to metric or from a smaller
+ | imperial unit to a larger one.
+ |
+ */
+
+if (! function_exists('inches2Millimeters')) {
+    /**
+     * Convert from inches to millimeters.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $inches
+     * @param int $precision
+     *
+     * @return float
+     */
+    function inches2Millimeters($inches, int $preceision = 1): float
+    {
+        return round(($inches * 2.54), $preceision);
+    }
+}
+
+if (! function_exists('inches2Meters')) {
+    /**
+     * Convert from inches to meters.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $inches
+     * @param int $precision
+     *
+     * @return float
+     */
+    function inches2Meters($inches, int $preceision = 1): float
+    {
+        return round(($inches / 39.37), $preceision);
+    }
+}
+
+if (! function_exists('inches2Yards')) {
+    /**
+     * Convert from inches to yards.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $inches
+     * @param int $precision
+     *
+     * @return float
+     */
+    function inches2Yards($inches, int $preceision = 1): float
+    {
+        return round(($inches / 36), $preceision);
+    }
+}
+
+if (! function_exists('inches2Feet')) {
+    /**
+     * Convert from inches to feet.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $inches
+     * @param int $precision
+     *
+     * @return float
+     */
+    function inches2Feet($inches, int $preceision = 1): float
+    {
+        return round(($inches * 12), $preceision);
+    }
+}
+
+if (! function_exists('fahrenheit2Celsius')) {
+    /**
+     * Convert from fahrenheit to celsius.
+     *
+     * @since 1.0.0
+     *
+     * @param float|int|string $fahrenheit
+     * @param int $precision
+     *
+     * @return float
+     */
+    function fahrenheit2Celsius($fahrenheit, int $preceision = 1): float
+    {
+        return round(($fahrenheit - 32 * (5/9)), $preceision);
+    }
+}
+
+/**
+ |--------------------------------------------------------------------------
+ | Miscellaneous functions
+ |--------------------------------------------------------------------------
+ | Functions that don't really belong to the other two categories.
+ |
+ */
+
 if (! function_exists('pa2Mbar')) {
     /**
      * Convert from pascals to milibars.

src/package.json

@@ -24,6 +24,7 @@
         "@tailwindcss/typography": "^0.5.2",
         "@vueuse/core": "^8.7.5",
         "axios": "^0.27.2",
+        "daisyui": "^2.29.0",
         "dayjs": "^1.11.3",
         "laravel-vue-i18n": "^1.4.3",
         "lodash": "^4.17.21",

src/phpcs.xml

@@ -16,8 +16,12 @@
     </rule>
     <rule ref="Generic.CodeAnalysis.UselessOverridingMethod"/>
     <rule ref="Generic.Commenting.DocComment">
-        <exclude name="Generic.Commenting.DocComment.TagValueIndent"/>
+        <exclude name="Generic.Commenting.DocComment.ContentAfterOpen"/>
+        <exclude name="Generic.Commenting.DocComment.ContentBeforeClose"/>
+        <exclude name="Generic.Commenting.DocComment.MissingShort"/>
         <exclude name="Generic.Commenting.DocComment.NonParamGroup"/>
+        <exclude name="Generic.Commenting.DocComment.ParamNotFirst"/>
+        <exclude name="Generic.Commenting.DocComment.TagValueIndent"/>
     </rule>
     <rule ref="Generic.ControlStructures.InlineControlStructure"/>
     <rule ref="Generic.Files.ByteOrderMark"/>
@@ -44,7 +48,8 @@
     </rule>
     <rule ref="Generic.NamingConventions.ConstructorName"/>
     <rule ref="Generic.NamingConventions.CamelCapsFunctionName">
-        <exclude-pattern>*/tests</exclude-pattern>
+        <exclude-pattern>/helpers/global_functions\.php</exclude-pattern>
+        <exclude-pattern>/tests/*</exclude-pattern>
     </rule>
     <rule ref="Generic.PHP.LowerCaseConstant"/>
     <rule ref="Generic.PHP.DeprecatedFunctions"/>
@@ -74,7 +79,7 @@
     <rule ref="PSR2.Namespaces.NamespaceDeclaration"/>
     <rule ref="PSR2.Namespaces.UseDeclaration"/>
     <rule ref="PSR1">
-        <exclude-pattern>*.php</exclude-pattern>
+        <exclude-pattern>*\.php</exclude-pattern>
         <exclude name="PSR1.Methods.CamelCapsMethodName.NotCamelCaps"/>
 
         <exclude-pattern>database/*</exclude-pattern>
@@ -208,6 +213,6 @@
 
     <arg name="basepath" value="."/>
     <arg name="colors"/>
-    <arg value="spv"/>
+    <arg value="nspv"/>
     <ini name="memory_limit" value="128M"/>
 </ruleset>

src/resources/css/elements/forms.css

@@ -1,4 +1,4 @@
-.form-block {
+.form-section {
     @apply grid auto-rows-max gap-y-1;
 }
 

src/resources/css/layouts/1-col-3-rows.css

@@ -0,0 +1,31 @@
+.page-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(45px, 90px) 1fr auto;
+    gap: 0em 0em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "header"
+        "content"
+        "footer";
+}
+
+.header {
+    grid-area: header;
+}
+
+.content {
+    grid-area: content;
+}
+
+.footer {
+    grid-area: footer;
+}
+
+/**
+<div class="page-container">
+    <div class="header"></div>
+    <div class="content"></div>
+    <div class="footer"></div>
+</div>
+**/

src/resources/css/layouts/dashboard-3-rows-2-mid-col.css

@@ -0,0 +1,52 @@
+.page-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(45px, 90px) 1fr auto;
+    gap: 0em 0em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "header"
+        "main-container"
+        "footer";
+}
+
+.header {
+    padding: 0rem 2rem;
+    grid-area: header;
+}
+
+.main-container {
+    display: grid;
+    grid-template-columns: minmax(200px, 350px) 1fr;
+    grid-template-rows: 1fr;
+    gap: 0em 0em;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "sidebar main-content";
+    grid-area: content-container;
+}
+
+.sidebar {
+    grid-area: sidebar;
+}
+
+.main-content {
+    padding: 2rem;
+    grid-area: main-content;
+}
+
+.footer {
+    grid-area: footer;
+}
+
+
+/**
+<div class="page-container">
+    <div class="header"></div>
+    <div class="main-container">
+        <div class="sidebar"></div>
+        <div class="main-content"></div>
+    </div>
+    <div class="footer"></div>
+</div>
+**/

src/resources/js/Components/DropdownLink.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { Link } from '@inertiajs/inertia-vue3'
+
+defineProps({
+    href: String,
+    as: String,
+});
+</script>
+
+<template>
+    <button v-if="as == 'button'" type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+        <slot></slot>
+    </button>
+
+    <a v-else-if="as =='a'" :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+        <slot></slot>
+    </a>
+
+    <Link v-else :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition">
+        <slot></slot>
+    </Link>
+</template>

src/resources/js/Components/DropdownSeparator.vue

@@ -0,0 +1,7 @@
+<script setup>
+//
+</script>
+
+<template>
+<div class="border-t border-gray-100"></div>
+</template>

src/resources/js/Components/DropdownTitle.vue

@@ -0,0 +1,9 @@
+<script setup>
+//
+</script>
+
+<template>
+<div class="block px-4 py-2 text-xs text-gray-400">
+    <slot></slot>
+</div>
+</template>

src/resources/js/Icons/Activity.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
 </svg>
 </template>

src/resources/js/Icons/AlertOctagon.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
     <line x1="12" y1="8" x2="12" y2="12"></line>
     <line x1="12" y1="16" x2="12.01" y2="16"></line>

src/resources/js/Icons/AlertTriangle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
     <line x1="12" y1="9" x2="12" y2="13"></line>
     <line x1="12" y1="17" x2="12.01" y2="17"></line>

src/resources/js/Icons/Archive.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="21 8 21 21 3 21 3 8"></polyline>
     <rect x="1" y="3" width="22" height="5"></rect>
     <line x1="10" y1="12" x2="14" y2="12"></line>

src/resources/js/Icons/ArrowRight.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="5" y1="12" x2="19" y2="12"></line>
     <polyline points="12 5 19 12 12 19"></polyline>
 </svg>

src/resources/js/Icons/Bell.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
 </svg>
 </template>

src/resources/js/Icons/BellOff.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
     <path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path>
     <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path>

src/resources/js/Icons/Bookmark.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
 </svg>
 </template>

src/resources/js/Icons/Calendar.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
     <line x1="16" y1="2" x2="16" y2="6"></line>
     <line x1="8" y1="2" x2="8" y2="6"></line>

src/resources/js/Icons/Check.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="20 6 9 17 4 12"></polyline>
 </svg>
 </template>

src/resources/js/Icons/CheckCircle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
     <polyline points="22 4 12 14.01 9 11.01"></polyline>
 </svg>

src/resources/js/Icons/ChevronDown.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="6 9 12 15 18 9"></polyline>
 </svg>
 </template>

src/resources/js/Icons/ChevronUp.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="18 15 12 9 6 15"></polyline>
 </svg>
 </template>

src/resources/js/Icons/Circle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
 </svg>
 </template>

src/resources/js/Icons/Clipboard.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
     <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
 </svg>

src/resources/js/Icons/Clock.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
     <polyline points="12 6 12 12 16 14"></polyline>
 </svg>

src/resources/js/Icons/Cloud.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
 </svg>
 </template>

src/resources/js/Icons/CloudOff.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M22.61 16.95A5 5 0 0 0 18 10h-1.26a8 8 0 0 0-7.05-6M5 5a8 8 0 0 0 4 15h9a5 5 0 0 0 1.7-.3"></path>
     <line x1="1" y1="1" x2="23" y2="23"></line>
 </svg>

src/resources/js/Icons/Copy.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
     <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
 </svg>

src/resources/js/Icons/CreditCard.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
     <line x1="1" y1="10" x2="23" y2="10"></line>
 </svg>

src/resources/js/Icons/Database.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
     <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
     <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>

src/resources/js/Icons/DownloadCloud.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path>
 </svg>
 </template>

src/resources/js/Icons/Edit.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M12 20h9"></path>
     <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
 </svg>

src/resources/js/Icons/ExternalLink.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
 </svg>
 </template>

src/resources/js/Icons/Eye.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>
 </svg>
 </template>

src/resources/js/Icons/EyeOff.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
     <line x1="1" y1="1" x2="23" y2="23"></line>
 </svg>

src/resources/js/Icons/File.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
     <polyline points="13 2 13 9 20 9"></polyline>
 </svg>

src/resources/js/Icons/FilePlus.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
     <polyline points="14 2 14 8 20 8"></polyline>
     <line x1="12" y1="18" x2="12" y2="12"></line>

src/resources/js/Icons/FileText.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
     <polyline points="14 2 14 8 20 8"></polyline>
     <line x1="16" y1="13" x2="8" y2="13"></line>

src/resources/js/Icons/Filter.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
 </svg>
 </template>

src/resources/js/Icons/Flag.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line>
 </svg>
 </template>

src/resources/js/Icons/GitPullRequest.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
+<template>
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
+    <circle cx="18" cy="18" r="3"></circle>
+    <circle cx="6" cy="6" r="3"></circle>
+    <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
+    <line x1="6" y1="9" x2="6" y2="21"></line>
+</svg>
+</template>

src/resources/js/Icons/HelpCircle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
     <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
     <line x1="12" y1="17" x2="12.01" y2="17"></line>

src/resources/js/Icons/Home.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
     <polyline points="9 22 9 12 15 12 15 22"></polyline>
 </svg>

src/resources/js/Icons/Inbox.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
     <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
 </svg>

src/resources/js/Icons/Info.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
     <line x1="12" y1="16" x2="12" y2="12"></line>
     <line x1="12" y1="8" x2="12.01" y2="8"></line>

src/resources/js/Icons/Layers.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
+<template>
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
+    <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+    <polyline points="2 17 12 22 22 17"></polyline>
+    <polyline points="2 12 12 17 22 12"></polyline>
+</svg>
+</template>

src/resources/js/Icons/Link.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
 </svg>
 </template>

src/resources/js/Icons/Loader.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="12" y1="2" x2="12" y2="6"></line>
     <line x1="12" y1="18" x2="12" y2="22"></line>
     <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>

src/resources/js/Icons/Lock.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
 </svg>
 </template>

src/resources/js/Icons/LogIn.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
     <polyline points="10 17 15 12 10 7"></polyline>
     <line x1="15" y1="12" x2="3" y2="12"></line>

src/resources/js/Icons/LogOut.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line>
 </svg>
 </template>

src/resources/js/Icons/Mail.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
     <polyline points="22,6 12,13 2,6"></polyline>
 </svg>

src/resources/js/Icons/MapPin.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
     <circle cx="12" cy="10" r="3"></circle>
 </svg>

src/resources/js/Icons/Menu.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="3" y1="12" x2="21" y2="12"></line>
     <line x1="3" y1="6" x2="21" y2="6"></line>
     <line x1="3" y1="18" x2="21" y2="18"></line>

src/resources/js/Icons/MessageCircle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
 </svg>
 </template>

src/resources/js/Icons/MessageSquare.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
 </svg>
 </template>

src/resources/js/Icons/MinusCircle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
     <line x1="8" y1="12" x2="16" y2="12"></line>
 </svg>

src/resources/js/Icons/Moon.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
 </svg>
 </template>

src/resources/js/Icons/MoreHorizontal.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="1"></circle>
     <circle cx="19" cy="12" r="1"></circle>
     <circle cx="5" cy="12" r="1"></circle>

src/resources/js/Icons/MoreVertical.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="1"></circle>
     <circle cx="12" cy="5" r="1"></circle>
     <circle cx="12" cy="19" r="1"></circle>

src/resources/js/Icons/Octagon.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
 </svg>
 </template>

src/resources/js/Icons/Package.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
     <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
     <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>

src/resources/js/Icons/Percent.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="19" y1="5" x2="5" y2="19"></line>
     <circle cx="6.5" cy="6.5" r="2.5"></circle>
     <circle cx="17.5" cy="17.5" r="2.5"></circle>

src/resources/js/Icons/Plus.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="12" y1="5" x2="12" y2="19"></line>
     <line x1="5" y1="12" x2="19" y2="12"></line>
 </svg>

src/resources/js/Icons/PlusCircle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
     <line x1="12" y1="8" x2="12" y2="16"></line>
     <line x1="8" y1="12" x2="16" y2="12"></line>

src/resources/js/Icons/Save.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
     <polyline points="17 21 17 13 7 13 7 21"></polyline>
     <polyline points="7 3 7 8 15 8"></polyline>

src/resources/js/Icons/Search.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="11" cy="11" r="8"></circle>
     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
 </svg>

src/resources/js/Icons/Send.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="22" y1="2" x2="11" y2="13"></line>
     <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
 </svg>

src/resources/js/Icons/Settings.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="3"></circle>
     <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
 </svg>

src/resources/js/Icons/Slash.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
     <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
 </svg>

src/resources/js/Icons/Sliders.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="4" y1="21" x2="4" y2="14"></line>
     <line x1="4" y1="10" x2="4" y2="3"></line>
     <line x1="12" y1="21" x2="12" y2="12"></line>

src/resources/js/Icons/Square.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
 </svg>
 </template>

src/resources/js/Icons/Star.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
 </svg>
 </template>

src/resources/js/Icons/Sun.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="5"></circle>
     <line x1="12" y1="1" x2="12" y2="3"></line>
     <line x1="12" y1="21" x2="12" y2="23"></line>

src/resources/js/Icons/Tag.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
     <line x1="7" y1="7" x2="7.01" y2="7"></line>
 </svg>

src/resources/js/Icons/Tool.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
 </svg>
 </template>

src/resources/js/Icons/Translate.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
+<template>
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
+    <path d="M27.85,29H30L24,14H21.65l-6,15H17.8l1.6-4h6.85ZM20.2,23l2.62-6.56L25.45,23Z"></path>
+    <path d="M18,7V5H11V2H9V5H2V7H12.74a14.71,14.71,0,0,1-3.19,6.18A13.5,13.5,0,0,1,7.26,9H5.16a16.47,16.47,0,0,0,3,5.58A16.84,16.84,0,0,1,3,18l.75,1.86A18.47,18.47,0,0,0,9.53,16a16.92,16.92,0,0,0,5.76,3.84L16,18a14.48,14.48,0,0,1-5.12-3.37A17.64,17.64,0,0,0,14.8,7Z"></path>
+</svg>
+</template>

src/resources/js/Icons/Trash.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="3 6 5 6 21 6"></polyline>
     <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
     <line x1="10" y1="11" x2="10" y2="17"></line>

src/resources/js/Icons/TrendingDown.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline>
     <polyline points="17 18 23 18 23 12"></polyline>
 </svg>

src/resources/js/Icons/TrendingUp.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
     <polyline points="17 6 23 6 23 12"></polyline>
 </svg>

src/resources/js/Icons/Unlock.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
     <path d="M7 11V7a5 5 0 0 1 9.9-1"></path>
 </svg>

src/resources/js/Icons/UploadCloud.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="16 16 12 12 8 16"></polyline>
     <line x1="12" y1="12" x2="12" y2="21"></line>
     <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path>

src/resources/js/Icons/User.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
     <circle cx="12" cy="7" r="4"></circle>
 </svg>

src/resources/js/Icons/UserCheck.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
     <circle cx="8.5" cy="7" r="4"></circle>
     <polyline points="17 11 19 13 23 9"></polyline>

src/resources/js/Icons/UserMinus.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
     <circle cx="8.5" cy="7" r="4"></circle>
     <line x1="23" y1="11" x2="17" y2="11"></line>

src/resources/js/Icons/UserPlus.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
     <circle cx="8.5" cy="7" r="4"></circle>
     <line x1="20" y1="8" x2="20" y2="14"></line>

src/resources/js/Icons/UserX.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
     <circle cx="8.5" cy="7" r="4"></circle>
     <line x1="18" y1="8" x2="23" y2="13"></line>

src/resources/js/Icons/Users.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
     <circle cx="9" cy="7" r="4"></circle>
     <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>

src/resources/js/Icons/Wallet.vue

@@ -1,11 +1,48 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg version="1.1"
+<svg 
+  version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xml:space="preserve"
   x="0px" y="0px"
   viewBox="0 0 512 512"
   style="enable-background:new 0 0 512 512;"
+  :height="heightNumber"
+  :width="widthNumber"
   preserveAspectRatio="xMidYMid meet"
   stroke="currentColor"
   stroke-width="2"
@@ -13,6 +50,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polygon points="204.8,0 102.4,102.4 138.607,102.4 204.8,36.207 228.702,60.1 251.648,46.848"></polygon>
     <polygon points="384,0 206.643,102.4 257.843,102.4 374.63,34.97 413.56,102.4 443.119,102.4"></polygon>
     <path d="M486.4,128H25.6C11.46,128,0,139.46,0,153.6v332.8C0,500.54,11.46,512,25.6,512h460.8c14.14,0,25.6-11.46,25.6-25.6V153.6

src/resources/js/Icons/X.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <line x1="18" y1="6" x2="6" y2="18"></line>
     <line x1="6" y1="6" x2="18" y2="18"></line>
 </svg>

src/resources/js/Icons/XCircle.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="12" cy="12" r="10"></circle>
     <line x1="15" y1="9" x2="9" y2="15"></line>
     <line x1="9" y1="9" x2="15" y2="15"></line>

src/resources/js/Icons/XOctagon.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
     <line x1="15" y1="9" x2="9" y2="15"></line>
     <line x1="9" y1="9" x2="15" y2="15"></line>

src/resources/js/Icons/Zap.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
 </svg>
 </template>

src/resources/js/Icons/ZapOff.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <polyline points="12.41 6.75 13 2 10.57 4.92"></polyline>
     <polyline points="18.57 12.91 21 10 15.66 10"></polyline>
     <polyline points="8 8 3 14 12 14 11 22 16 16"></polyline>

src/resources/js/Icons/ZoomIn.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="11" cy="11" r="8"></circle>
     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
     <line x1="11" y1="8" x2="11" y2="14"></line>

src/resources/js/Icons/ZoomOut.vue

@@ -1,5 +1,40 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  title: String,
+  height: Number,
+  width: Number,
+})
+
+// variables
+const heightNumber = ref(24)
+const widthNumber = ref(24)
+
+if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
+  heightNumber.value = Number.parseInt(props.height)
+} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
+  heightNumber.value = Number.parseInt(props.width)
+}
+
+if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
+  widthNumber.value = Number.parseInt(props.width)
+} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
+  widthNumber.value = Number.parseInt(props.height)
+}
+
+// computed
+const titleString = computed(() => {
+  if (typeof props.title === "string" && props.title.trim().length > 0) {
+    return props.title.trim()
+  }
+  return ""
+})
+</script>
+
 <template>
-<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 24 24" :height="heightNumber" :width="widthNumber" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
+    <title v-if="titleString.length > 0" v-html="title"></title>
     <circle cx="11" cy="11" r="8"></circle>
     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
     <line x1="8" y1="11" x2="14" y2="11"></line>

src/resources/js/Layouts/AppLayout.vue

@@ -1,290 +1,325 @@
+<script setup>
+import { ref } from 'vue'
+import { Head, Link } from '@inertiajs/inertia-vue3'
+import { Inertia } from '@inertiajs/inertia'
+import JetApplicationMark from '@/Jetstream/ApplicationMark.vue'
+import JetBanner from '@/Jetstream/Banner.vue'
+import JetDropdown from '@/Jetstream/Dropdown.vue'
+import JetDropdownLink from '@/Jetstream/DropdownLink.vue'
+import JetNavLink from '@/Jetstream/NavLink.vue'
+import JetResponsiveNavLink from '@/Jetstream/ResponsiveNavLink.vue'
+
+defineProps({
+  title: String,
+})
+
+// variables
+const showingNavigationDropdown = ref(false)
+
+// methods
+const switchToTeam = (team) => {
+  Inertia.put(route('current-team.update'), {
+    team_id: team.id,
+  }, {
+    preserveState: false,
+  })
+}
+
+const logout = () => {
+  Inertia.post(route('logout'))
+}
+</script>
+
 <template>
-    <div>
-        <Head :title="title" />
+    <JetBanner></JetBanner>
 
-        <div class="absolute top-0 mt-4 z-50">
-            <generic-notifications></generic-notifications>
-            <success-notifications></success-notifications>
-            <warning-notifications></warning-notifications>
-            <error-notifications></error-notifications>
-        </div>
+    <div class="min-h-screen bg-neutral-100">
+        <header class="bg-white shadow-lg">
+            <div class="max-w-7xl mx-auto">
+                <nav class="">
+                    <!-- Primary Navigation Menu -->
+                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                        <div class="flex justify-between h-16">
+                            <div class="flex">
+                                <!-- Logo -->
+                                <div class="shrink-0 flex items-center">
+                                    <Link :href="route('home')">
+                                        <JetApplicationMark class="block h-9 w-auto"></JetApplicationMark>
+                                    </Link>
+                                </div>
 
-        <jet-banner />
-
-        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
-            <div class="grid-container w-4/5 mx-auto grid">
-                <div class="nav">
-                    <div class="navh flex items-center justify-between lg:justify-center">
-                        <Link :href="route('dashboard')" class="flex flex-row items-center justify-center">
-                            <ApplicationMark class="block h-9 w-auto" />
-                            <span class="ml-3 font-bold text-xl dark:text-white">{{ $page.props.app_name }}</span>
-                        </Link>
-
-                        <div class="flex items-center lg:hidden">
-                            <button @click="showingNavigationDropdown = ! showingNavigationDropdown" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition">
-                                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                                    <path :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-                                    <path :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-
-                    <nav class="navc">
-                        <div class="hidden lg:flex lg:flex-col">
-                            <SidenavLink :href="route('dashboard')" :active="route().current('dashboard')" :title="'Your Dashboard'">
-                                <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
-                                <span class="ml-2">Dashboard</span>
-                            </SidenavLink>
-                        </div>
-                        <!-- Responsive Navigation Menu -->
-                        <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="lg:hidden">
-                            <div class="pt-2 pb-3 flex flex-col space-y-1">
-                                <Link :href="route('dashboard')" :active="route().current('dashboard')">
-                                    Dashboard
-                                </Link>
+                                <!-- Navigation Links -->
+                                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
+                                    <JetNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                                        Dashboard
+                                    </JetNavLink>
+                                    <JetNavLink :href="route('dashboard.posts.index')" :active="route().current('dashboard.posts.*')">
+                                        Posts
+                                    </JetNavLink>
+                                    <JetNavLink :href="route('dashboard.categories.index')" :active="route().current('dashboard.categories.*')">
+                                        Categories
+                                    </JetNavLink>
+                                    <JetNavLink :href="route('dashboard.media.index')" :active="route().current('dashboard.media.*')">
+                                        Media
+                                    </JetNavLink>
+                                </div>
                             </div>
 
-                            <!-- Responsive Settings Options -->
-                            <div class="pt-4 pb-1 border-t border-gray-200">
-                                <div class="flex items-center px-4">
-                                    <div v-if="$page.props.jetstream.managesProfilePhotos" class="flex-shrink-0 mr-3" >
-                                        <img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" />
-                                    </div>
+                            <div class="hidden sm:flex sm:items-center sm:ml-6">
+                                <div class="ml-3 relative">
+                                    <!-- Teams Dropdown -->
+                                    <JetDropdown v-if="$page.props.jetstream.hasTeamFeatures" align="right" width="60">
+                                        <template #trigger>
+                                            <span class="inline-flex rounded-md">
+                                                <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
+                                                    {{ $page.props.user.current_team.name }}
 
-                                    <div>
-                                        <div class="font-medium text-base text-gray-800">{{ $page.props.user.name }}</div>
-                                        <div class="font-medium text-sm text-gray-500">{{ $page.props.user.email }}</div>
-                                    </div>
-                                </div>
-                                <div class="mt-3 flex flex-col space-y-1">
-                                    <ResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
-                                        Profile
-                                    </ResponsiveNavLink>
+                                                    <svg
+                                                        class="ml-2 -mr-0.5 h-4 w-4"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 20 20"
+                                                        fill="currentColor"
+                                                    >
+                                                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                                    </svg>
+                                                </button>
+                                            </span>
+                                        </template>
 
-                                    <ResponsiveNavLink :href="route('api-tokens.index')" :active="route().current('api-tokens.index')" v-if="$page.props.jetstream.hasApiFeatures">
-                                        API Tokens
-                                    </ResponsiveNavLink>
-
-                                    <!-- Authentication -->
-                                    <form method="POST" @submit.prevent="logout">
-                                        <ResponsiveNavLink as="button">
-                                            Log Out
-                                        </ResponsiveNavLink>
-                                    </form>
-
-                                    <!-- Team Management -->
-                                    <template v-if="$page.props.jetstream.hasTeamFeatures">
-                                        <div class="border-t border-gray-200"></div>
-
-                                        <div class="block px-4 py-2 text-xs text-gray-400">
-                                            Manage Team
-                                        </div>
-
-                                        <!-- Team Settings -->
-                                        <ResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
-                                            Team Settings
-                                        </ResponsiveNavLink>
-
-                                        <ResponsiveNavLink :href="route('teams.create')" :active="route().current('teams.create')" v-if="$page.props.jetstream.canCreateTeams">
-                                            Create New Team
-                                        </ResponsiveNavLink>
-
-                                        <div class="border-t border-gray-200"></div>
-
-                                        <!-- Team Switcher -->
-                                        <div class="block px-4 py-2 text-xs text-gray-400">
-                                            Switch Teams
-                                        </div>
-
-                                        <template v-for="team in $page.props.user.all_teams" :key="team.id">
-                                            <form @submit.prevent="switchToTeam(team)">
-                                                <ResponsiveNavLink as="button">
-                                                    <div class="flex items-center">
-                                                        <svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                                                        <div>{{ team.name }}</div>
+                                        <template #content>
+                                            <div class="w-60">
+                                                <!-- Team Management -->
+                                                <template v-if="$page.props.jetstream.hasTeamFeatures">
+                                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                                        Manage Team
                                                     </div>
-                                                </ResponsiveNavLink>
+
+                                                    <!-- Team Settings -->
+                                                    <JetDropdownLink :href="route('teams.show', $page.props.user.current_team)">
+                                                        Team Settings
+                                                    </JetDropdownLink>
+
+                                                    <JetDropdownLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')">
+                                                        Create New Team
+                                                    </JetDropdownLink>
+
+                                                    <div class="border-t border-gray-100" />
+
+                                                    <!-- Team Switcher -->
+                                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                                        Switch Teams
+                                                    </div>
+
+                                                    <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                                        <form @submit.prevent="switchToTeam(team)">
+                                                            <JetDropdownLink as="button">
+                                                                <div class="flex items-center">
+                                                                    <svg
+                                                                        v-if="team.id == $page.props.user.current_team_id"
+                                                                        class="mr-2 h-5 w-5 text-green-400"
+                                                                        fill="none"
+                                                                        stroke-linecap="round"
+                                                                        stroke-linejoin="round"
+                                                                        stroke-width="2"
+                                                                        stroke="currentColor"
+                                                                        viewBox="0 0 24 24"
+                                                                    ><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                                                    <div>{{ team.name }}</div>
+                                                                </div>
+                                                            </JetDropdownLink>
+                                                        </form>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                        </template>
+                                    </JetDropdown>
+                                </div>
+
+                                <!-- Settings Dropdown -->
+                                <div class="ml-3 relative">
+                                    <JetDropdown align="right" width="48">
+                                        <template #trigger>
+                                            <button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
+                                                <picture class="h-8 w-8 rounded-full">
+                                                    <source v-for="(path,codec) in $page.props.user.profile_photo_paths.paths" :key="codec" :srcset="$page.props.user.profile_photo_paths.urlBase+'/'+path" :type="'image/'+codec" height="32" width="32" class="h-8 w-8 rounded-full object-cover">
+                                                    <img :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" height="32" width="32" class="h-8 w-8 rounded-full object-cover">
+                                                </picture>
+                                            </button>
+
+                                            <span v-else class="inline-flex rounded-md">
+                                                <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
+                                                    {{ $page.props.user.name }}
+
+                                                    <svg
+                                                        class="ml-2 -mr-0.5 h-4 w-4"
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                        viewBox="0 0 20 20"
+                                                        fill="currentColor"
+                                                    >
+                                                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                                                    </svg>
+                                                </button>
+                                            </span>
+                                        </template>
+
+                                        <template #content>
+                                            <!-- Account Management -->
+                                            <div class="block px-4 py-2 text-xs text-gray-400">
+                                                Manage Account
+                                            </div>
+
+                                            <JetDropdownLink :href="route('profile.show')">
+                                                Profile
+                                            </JetDropdownLink>
+
+                                            <JetDropdownLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')">
+                                                API Tokens
+                                            </JetDropdownLink>
+
+                                            <div class="border-t border-gray-100" />
+
+                                            <!-- Authentication -->
+                                            <form @submit.prevent="logout">
+                                                <JetDropdownLink as="button">
+                                                    Log Out
+                                                </JetDropdownLink>
                                             </form>
                                         </template>
-                                    </template>
+                                    </JetDropdown>
                                 </div>
                             </div>
-                        </div>
-                    </nav>
-                </div>
-                <div class="main">
-                    <div class="mainh">
-                        <div class="flex items-center">
-                            <h2 class="font-semibold text-xl text-gray-800 dark:text-white leading-tight">
-                                <slot name="header"></slot>
-                            </h2>
-                        </div>
-                        <div class="flex flex-row items-center justify-end">
-                            <!-- <ThemeSwitcher></ThemeSwitcher> -->
 
-                            <div class="ml-3 relative">
-                                <!-- Teams Dropdown -->
-                                <jet-dropdown align="right" width="60" v-if="$page.props.jetstream.hasTeamFeatures">
-                                    <template #trigger>
-                                        <span class="inline-flex rounded-md">
-                                            <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:bg-gray-50 active:bg-gray-50 transition">
-                                                {{ $page.props.user.current_team.name }}
-
-                                                <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                        </span>
-                                    </template>
-
-                                    <template #content>
-                                        <div class="w-60">
-                                            <!-- Team Management -->
-                                            <template v-if="$page.props.jetstream.hasTeamFeatures">
-                                                <div class="block px-4 py-2 text-xs text-gray-400">
-                                                    Manage Team
-                                                </div>
-
-                                                <!-- Team Settings -->
-                                                <jet-dropdown-link :href="route('teams.show', $page.props.user.current_team)">
-                                                    Team Settings
-                                                </jet-dropdown-link>
-
-                                                <jet-dropdown-link :href="route('teams.create')" v-if="$page.props.jetstream.canCreateTeams">
-                                                    Create New Team
-                                                </jet-dropdown-link>
-
-                                                <div class="border-t border-gray-100"></div>
-
-                                                <!-- Team Switcher -->
-                                                <div class="block px-4 py-2 text-xs text-gray-400">
-                                                    Switch Teams
-                                                </div>
-
-                                                <template v-for="team in $page.props.user.all_teams" :key="team.id">
-                                                    <form @submit.prevent="switchToTeam(team)">
-                                                        <jet-dropdown-link as="button">
-                                                            <div class="flex items-center">
-                                                                <svg v-if="team.id == $page.props.user.current_team_id" class="mr-2 h-5 w-5 text-green-400" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-                                                                <div>{{ team.name }}</div>
-                                                            </div>
-                                                        </jet-dropdown-link>
-                                                    </form>
-                                                </template>
-                                            </template>
-                                        </div>
-                                    </template>
-                                </jet-dropdown>
-                            </div>
-
-                            <!-- Settings Dropdown -->
-                            <div class="ml-3 relative">
-                                <jet-dropdown align="right" width="48">
-                                    <template #trigger>
-                                        <button v-if="$page.props.jetstream.managesProfilePhotos" class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition">
-                                            <img class="h-8 w-8 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name" />
-                                        </button>
-
-                                        <span v-else class="inline-flex rounded-md">
-                                            <button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition">
-                                                {{ $page.props.user.name }}
-
-                                                <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-                                                </svg>
-                                            </button>
-                                        </span>
-                                    </template>
-
-                                    <template #content>
-                                        <!-- Account Management -->
-                                        <div class="block px-4 py-2 text-xs text-gray-400">
-                                            Manage Account
-                                        </div>
-
-                                        <jet-dropdown-link :href="route('profile.show')">
-                                            Profile
-                                        </jet-dropdown-link>
-
-                                        <jet-dropdown-link :href="route('api-tokens.index')" v-if="$page.props.jetstream.hasApiFeatures">
-                                            API Tokens
-                                        </jet-dropdown-link>
-
-                                        <div class="border-t border-gray-100"></div>
-
-                                        <!-- Authentication -->
-                                        <form @submit.prevent="logout">
-                                            <jet-dropdown-link as="button">
-                                                Log Out
-                                            </jet-dropdown-link>
-                                        </form>
-                                    </template>
-                                </jet-dropdown>
+                            <!-- Hamburger -->
+                            <div class="-mr-2 flex items-center sm:hidden">
+                                <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition" @click="showingNavigationDropdown = ! showingNavigationDropdown">
+                                    <svg
+                                        class="h-6 w-6"
+                                        stroke="currentColor"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            :class="{'hidden': showingNavigationDropdown, 'inline-flex': ! showingNavigationDropdown }"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M4 6h16M4 12h16M4 18h16"
+                                        />
+                                        <path
+                                            :class="{'hidden': ! showingNavigationDropdown, 'inline-flex': showingNavigationDropdown }"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M6 18L18 6M6 6l12 12"
+                                        />
+                                    </svg>
+                                </button>
                             </div>
                         </div>
                     </div>
-                    <main class="mainc">
-                        <slot></slot>
-                    </main>
-                </div>
+
+                    <!-- Responsive Navigation Menu -->
+                    <div :class="{'block': showingNavigationDropdown, 'hidden': ! showingNavigationDropdown}" class="sm:hidden">
+                        <div class="pt-2 pb-3 space-y-1">
+                            <JetResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
+                                Dashboard
+                            </JetResponsiveNavLink>
+                        </div>
+
+                        <!-- Responsive Settings Options -->
+                        <div class="pt-4 pb-1 border-t border-gray-200">
+                            <div class="flex items-center px-4">
+                                <div v-if="$page.props.jetstream.managesProfilePhotos" class="shrink-0 mr-3">
+                                    <img class="h-10 w-10 rounded-full object-cover" :src="$page.props.user.profile_photo_url" :alt="$page.props.user.name">
+                                </div>
+
+                                <div>
+                                    <div class="font-medium text-base text-gray-800">
+                                        {{ $page.props.user.name }}
+                                    </div>
+                                    <div class="font-medium text-sm text-gray-500">
+                                        {{ $page.props.user.email }}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="mt-3 space-y-1">
+                                <JetResponsiveNavLink :href="route('profile.show')" :active="route().current('profile.show')">
+                                    Profile
+                                </JetResponsiveNavLink>
+
+                                <JetResponsiveNavLink v-if="$page.props.jetstream.hasApiFeatures" :href="route('api-tokens.index')" :active="route().current('api-tokens.index')">
+                                    API Tokens
+                                </JetResponsiveNavLink>
+
+                                <!-- Authentication -->
+                                <form method="POST" @submit.prevent="logout">
+                                    <JetResponsiveNavLink as="button">
+                                        Log Out
+                                    </JetResponsiveNavLink>
+                                </form>
+
+                                <!-- Team Management -->
+                                <template v-if="$page.props.jetstream.hasTeamFeatures">
+                                    <div class="border-t border-gray-200" />
+
+                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                        Manage Team
+                                    </div>
+
+                                    <!-- Team Settings -->
+                                    <JetResponsiveNavLink :href="route('teams.show', $page.props.user.current_team)" :active="route().current('teams.show')">
+                                        Team Settings
+                                    </JetResponsiveNavLink>
+
+                                    <JetResponsiveNavLink v-if="$page.props.jetstream.canCreateTeams" :href="route('teams.create')" :active="route().current('teams.create')">
+                                        Create New Team
+                                    </JetResponsiveNavLink>
+
+                                    <div class="border-t border-gray-200" />
+
+                                    <!-- Team Switcher -->
+                                    <div class="block px-4 py-2 text-xs text-gray-400">
+                                        Switch Teams
+                                    </div>
+
+                                    <template v-for="team in $page.props.user.all_teams" :key="team.id">
+                                        <form @submit.prevent="switchToTeam(team)">
+                                            <JetResponsiveNavLink as="button">
+                                                <div class="flex items-center">
+                                                    <svg
+                                                        v-if="team.id == $page.props.user.current_team_id"
+                                                        class="mr-2 h-5 w-5 text-green-400"
+                                                        fill="none"
+                                                        stroke-linecap="round"
+                                                        stroke-linejoin="round"
+                                                        stroke-width="2"
+                                                        stroke="currentColor"
+                                                        viewBox="0 0 24 24"
+                                                    ><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                                    <div>{{ team.name }}</div>
+                                                </div>
+                                            </JetResponsiveNavLink>
+                                        </form>
+                                    </template>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+
+                <template v-if="$slots.header">
+                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+                        <slot name="header"></slot>
+                    </div>
+                </template>
+            </div>
+        </header>
+
+        <div class="py-12">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <slot></slot>
             </div>
         </div>
     </div>
 </template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-import { Head, Link } from '@inertiajs/inertia-vue3'
-import SuccessNotifications from '@/Components/Notifications/SuccessNotifications.vue'
-import ErrorNotifications from '@/Components/Notifications/ErrorNotifications.vue'
-import GenericNotifications from '@/Components/Notifications/GenericNotifications.vue'
-import WarningNotifications from '@/Components/Notifications/WarningNotifications.vue'
-import ApplicationMark from '@/Jetstream/ApplicationMark.vue'
-import ResponsiveNavLink from '@/Components/ResponsiveNavLink.vue'
-import SidenavLink from '@/Components/SidenavLink.vue'
-import JetBanner from '@/Jetstream/Banner.vue'
-import JetDropdown from '@/Jetstream/Dropdown.vue'
-import JetDropdownLink from '@/Jetstream/DropdownLink.vue'
-
-export default defineComponent({
-  props: {
-    title: String,
-  },
-
-  components: {
-    Head,
-    Link,
-    SuccessNotifications,
-    ErrorNotifications,
-    GenericNotifications,
-    WarningNotifications,
-    ApplicationMark,
-    ResponsiveNavLink,
-    SidenavLink,
-    JetBanner,
-    JetDropdown,
-    JetDropdownLink,
-  },
-
-  setup(props) {
-    let showingNavigationDropdown = ref(false)
-
-    return { showingNavigationDropdown }
-  },
-
-  methods: {
-    switchToTeam(team) {
-      this.$inertia.put(route('current-team.update'), {
-        'team_id': team.id
-      }, {
-        preserveState: false
-      })
-    },
-
-    logout() {
-      this.$inertia.post(route('logout'));
-    },
-  }
-})
-</script>

src/resources/js/Layouts/AuthLayout.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { Head } from '@inertiajs/inertia-vue3'
+
+defineProps({
+  title: String,
+})
+</script>
+
+<template>
+    <Head :title="title"></Head>
+
+    <div class="min-h-screen w-full bg-zinc-500">
+        <div class="grid items-center min-h-screen max-w-screen-lg mx-auto">
+            <div class="grid auto-rows-max gap-y-6">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>