From b8df8a8d4d0a26920588ddc667a52d1f054ed0e5 Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@gmail.com>
Date: Tue, 27 Sep 2022 11:10:15 -0600
Subject: [PATCH] modifying icons to have a default height, width, and
 optionally a title

---
 src/resources/js/Icons/Activity.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/AlertOctagon.vue   | 37 ++++++++++++++++++-
 src/resources/js/Icons/AlertTriangle.vue  | 37 ++++++++++++++++++-
 src/resources/js/Icons/Archive.vue        | 37 ++++++++++++++++++-
 src/resources/js/Icons/ArrowRight.vue     | 37 ++++++++++++++++++-
 src/resources/js/Icons/Bell.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/BellOff.vue        | 37 ++++++++++++++++++-
 src/resources/js/Icons/Bookmark.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/Calendar.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/Check.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/CheckCircle.vue    | 37 ++++++++++++++++++-
 src/resources/js/Icons/ChevronDown.vue    | 37 ++++++++++++++++++-
 src/resources/js/Icons/ChevronUp.vue      | 37 ++++++++++++++++++-
 src/resources/js/Icons/Circle.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/Clipboard.vue      | 37 ++++++++++++++++++-
 src/resources/js/Icons/Clock.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/Cloud.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/CloudOff.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/Copy.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/CreditCard.vue     | 37 ++++++++++++++++++-
 src/resources/js/Icons/Database.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/DownloadCloud.vue  | 37 ++++++++++++++++++-
 src/resources/js/Icons/Edit.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/ExternalLink.vue   | 37 ++++++++++++++++++-
 src/resources/js/Icons/Eye.vue            | 37 ++++++++++++++++++-
 src/resources/js/Icons/EyeOff.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/File.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/FilePlus.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/FileText.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/Filter.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/Flag.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/GitPullRequest.vue | 43 +++++++++++++++++++++++
 src/resources/js/Icons/HelpCircle.vue     | 37 ++++++++++++++++++-
 src/resources/js/Icons/Home.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/Inbox.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/Info.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/Layers.vue         | 42 ++++++++++++++++++++++
 src/resources/js/Icons/Link.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/Loader.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/Lock.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/LogIn.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/LogOut.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/Mail.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/MapPin.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/Menu.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/MessageCircle.vue  | 37 ++++++++++++++++++-
 src/resources/js/Icons/MessageSquare.vue  | 37 ++++++++++++++++++-
 src/resources/js/Icons/MinusCircle.vue    | 37 ++++++++++++++++++-
 src/resources/js/Icons/Moon.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/MoreHorizontal.vue | 37 ++++++++++++++++++-
 src/resources/js/Icons/MoreVertical.vue   | 37 ++++++++++++++++++-
 src/resources/js/Icons/Octagon.vue        | 37 ++++++++++++++++++-
 src/resources/js/Icons/Package.vue        | 37 ++++++++++++++++++-
 src/resources/js/Icons/Percent.vue        | 37 ++++++++++++++++++-
 src/resources/js/Icons/Plus.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/PlusCircle.vue     | 37 ++++++++++++++++++-
 src/resources/js/Icons/Save.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/Search.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/Send.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/Settings.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/Slash.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/Sliders.vue        | 37 ++++++++++++++++++-
 src/resources/js/Icons/Square.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/Star.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/Sun.vue            | 37 ++++++++++++++++++-
 src/resources/js/Icons/Tag.vue            | 37 ++++++++++++++++++-
 src/resources/js/Icons/Tool.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/Translate.vue      | 41 +++++++++++++++++++++
 src/resources/js/Icons/Trash.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/TrendingDown.vue   | 37 ++++++++++++++++++-
 src/resources/js/Icons/TrendingUp.vue     | 37 ++++++++++++++++++-
 src/resources/js/Icons/Unlock.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/UploadCloud.vue    | 37 ++++++++++++++++++-
 src/resources/js/Icons/User.vue           | 37 ++++++++++++++++++-
 src/resources/js/Icons/UserCheck.vue      | 37 ++++++++++++++++++-
 src/resources/js/Icons/UserMinus.vue      | 37 ++++++++++++++++++-
 src/resources/js/Icons/UserPlus.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/UserX.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/Users.vue          | 37 ++++++++++++++++++-
 src/resources/js/Icons/Wallet.vue         | 40 ++++++++++++++++++++-
 src/resources/js/Icons/X.vue              | 37 ++++++++++++++++++-
 src/resources/js/Icons/XCircle.vue        | 37 ++++++++++++++++++-
 src/resources/js/Icons/XOctagon.vue       | 37 ++++++++++++++++++-
 src/resources/js/Icons/Zap.vue            | 37 ++++++++++++++++++-
 src/resources/js/Icons/ZapOff.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/ZoomIn.vue         | 37 ++++++++++++++++++-
 src/resources/js/Icons/ZoomOut.vue        | 37 ++++++++++++++++++-
 87 files changed, 3153 insertions(+), 84 deletions(-)
 create mode 100644 src/resources/js/Icons/GitPullRequest.vue
 create mode 100644 src/resources/js/Icons/Layers.vue
 create mode 100644 src/resources/js/Icons/Translate.vue

diff --git a/src/resources/js/Icons/Activity.vue b/src/resources/js/Icons/Activity.vue
index 2363ca2..ade4395 100644
--- a/src/resources/js/Icons/Activity.vue
+++ b/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>
diff --git a/src/resources/js/Icons/AlertOctagon.vue b/src/resources/js/Icons/AlertOctagon.vue
index 5ea47b0..ff0c4ee 100644
--- a/src/resources/js/Icons/AlertOctagon.vue
+++ b/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>
diff --git a/src/resources/js/Icons/AlertTriangle.vue b/src/resources/js/Icons/AlertTriangle.vue
index 94f0ad6..60d3416 100644
--- a/src/resources/js/Icons/AlertTriangle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Archive.vue b/src/resources/js/Icons/Archive.vue
index cc024c8..a9bb4cb 100644
--- a/src/resources/js/Icons/Archive.vue
+++ b/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>
diff --git a/src/resources/js/Icons/ArrowRight.vue b/src/resources/js/Icons/ArrowRight.vue
index 3373f26..2f99869 100644
--- a/src/resources/js/Icons/ArrowRight.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Bell.vue b/src/resources/js/Icons/Bell.vue
index a72077f..ac387fa 100644
--- a/src/resources/js/Icons/Bell.vue
+++ b/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>
diff --git a/src/resources/js/Icons/BellOff.vue b/src/resources/js/Icons/BellOff.vue
index 0e3930b..1cfb281 100644
--- a/src/resources/js/Icons/BellOff.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Bookmark.vue b/src/resources/js/Icons/Bookmark.vue
index d891a3e..7e17304 100644
--- a/src/resources/js/Icons/Bookmark.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Calendar.vue b/src/resources/js/Icons/Calendar.vue
index 60ebb31..779b47d 100644
--- a/src/resources/js/Icons/Calendar.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Check.vue b/src/resources/js/Icons/Check.vue
index d45b134..f9fc5f3 100644
--- a/src/resources/js/Icons/Check.vue
+++ b/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>
diff --git a/src/resources/js/Icons/CheckCircle.vue b/src/resources/js/Icons/CheckCircle.vue
index e5feb59..669fcee 100644
--- a/src/resources/js/Icons/CheckCircle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/ChevronDown.vue b/src/resources/js/Icons/ChevronDown.vue
index f7fb0b5..9abfa83 100644
--- a/src/resources/js/Icons/ChevronDown.vue
+++ b/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>
diff --git a/src/resources/js/Icons/ChevronUp.vue b/src/resources/js/Icons/ChevronUp.vue
index 1ecd3aa..cd7d067 100644
--- a/src/resources/js/Icons/ChevronUp.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Circle.vue b/src/resources/js/Icons/Circle.vue
index 4f440e4..c2788e6 100644
--- a/src/resources/js/Icons/Circle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Clipboard.vue b/src/resources/js/Icons/Clipboard.vue
index a26c801..69999e3 100644
--- a/src/resources/js/Icons/Clipboard.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Clock.vue b/src/resources/js/Icons/Clock.vue
index 7985d94..2ce63c7 100644
--- a/src/resources/js/Icons/Clock.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Cloud.vue b/src/resources/js/Icons/Cloud.vue
index 58ea95a..8aa7472 100644
--- a/src/resources/js/Icons/Cloud.vue
+++ b/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>
diff --git a/src/resources/js/Icons/CloudOff.vue b/src/resources/js/Icons/CloudOff.vue
index 6734ed9..04cd31d 100644
--- a/src/resources/js/Icons/CloudOff.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Copy.vue b/src/resources/js/Icons/Copy.vue
index 6742b63..0457be9 100644
--- a/src/resources/js/Icons/Copy.vue
+++ b/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>
diff --git a/src/resources/js/Icons/CreditCard.vue b/src/resources/js/Icons/CreditCard.vue
index c408a00..c1c8158 100644
--- a/src/resources/js/Icons/CreditCard.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Database.vue b/src/resources/js/Icons/Database.vue
index aa77ee7..8512021 100644
--- a/src/resources/js/Icons/Database.vue
+++ b/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>
diff --git a/src/resources/js/Icons/DownloadCloud.vue b/src/resources/js/Icons/DownloadCloud.vue
index 75f905c..e27d3ef 100644
--- a/src/resources/js/Icons/DownloadCloud.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Edit.vue b/src/resources/js/Icons/Edit.vue
index 6d51714..c121e3d 100644
--- a/src/resources/js/Icons/Edit.vue
+++ b/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>
diff --git a/src/resources/js/Icons/ExternalLink.vue b/src/resources/js/Icons/ExternalLink.vue
index 6cf14ed..2777e32 100644
--- a/src/resources/js/Icons/ExternalLink.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Eye.vue b/src/resources/js/Icons/Eye.vue
index 6687992..512315d 100644
--- a/src/resources/js/Icons/Eye.vue
+++ b/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>
diff --git a/src/resources/js/Icons/EyeOff.vue b/src/resources/js/Icons/EyeOff.vue
index 9ad1a2c..a7397b3 100644
--- a/src/resources/js/Icons/EyeOff.vue
+++ b/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>
diff --git a/src/resources/js/Icons/File.vue b/src/resources/js/Icons/File.vue
index 86353e6..433724f 100644
--- a/src/resources/js/Icons/File.vue
+++ b/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>
diff --git a/src/resources/js/Icons/FilePlus.vue b/src/resources/js/Icons/FilePlus.vue
index 3e31445..f38c54a 100644
--- a/src/resources/js/Icons/FilePlus.vue
+++ b/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>
diff --git a/src/resources/js/Icons/FileText.vue b/src/resources/js/Icons/FileText.vue
index 6c9fcc5..e45b1a0 100644
--- a/src/resources/js/Icons/FileText.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Filter.vue b/src/resources/js/Icons/Filter.vue
index 2bb119a..eccbaac 100644
--- a/src/resources/js/Icons/Filter.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Flag.vue b/src/resources/js/Icons/Flag.vue
index ec1b79d..598ce47 100644
--- a/src/resources/js/Icons/Flag.vue
+++ b/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>
diff --git a/src/resources/js/Icons/GitPullRequest.vue b/src/resources/js/Icons/GitPullRequest.vue
new file mode 100644
index 0000000..b1543b6
--- /dev/null
+++ b/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>
diff --git a/src/resources/js/Icons/HelpCircle.vue b/src/resources/js/Icons/HelpCircle.vue
index 2d7b622..6406782 100644
--- a/src/resources/js/Icons/HelpCircle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Home.vue b/src/resources/js/Icons/Home.vue
index 952a4f9..681b1e4 100644
--- a/src/resources/js/Icons/Home.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Inbox.vue b/src/resources/js/Icons/Inbox.vue
index c44c273..7a95a53 100644
--- a/src/resources/js/Icons/Inbox.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Info.vue b/src/resources/js/Icons/Info.vue
index 0e14dd9..c5ed1d3 100644
--- a/src/resources/js/Icons/Info.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Layers.vue b/src/resources/js/Icons/Layers.vue
new file mode 100644
index 0000000..5e3793f
--- /dev/null
+++ b/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>
diff --git a/src/resources/js/Icons/Link.vue b/src/resources/js/Icons/Link.vue
index e446c98..acb7c1a 100644
--- a/src/resources/js/Icons/Link.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Loader.vue b/src/resources/js/Icons/Loader.vue
index bfe229f..71c537b 100644
--- a/src/resources/js/Icons/Loader.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Lock.vue b/src/resources/js/Icons/Lock.vue
index 1c40c8e..4c4da2f 100644
--- a/src/resources/js/Icons/Lock.vue
+++ b/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>
diff --git a/src/resources/js/Icons/LogIn.vue b/src/resources/js/Icons/LogIn.vue
index 6939d83..811fcd5 100644
--- a/src/resources/js/Icons/LogIn.vue
+++ b/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>
diff --git a/src/resources/js/Icons/LogOut.vue b/src/resources/js/Icons/LogOut.vue
index 68e68f2..c7ea466 100644
--- a/src/resources/js/Icons/LogOut.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Mail.vue b/src/resources/js/Icons/Mail.vue
index ac99c85..92f10ee 100644
--- a/src/resources/js/Icons/Mail.vue
+++ b/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>
diff --git a/src/resources/js/Icons/MapPin.vue b/src/resources/js/Icons/MapPin.vue
index dd8c34c..f6fa9ea 100644
--- a/src/resources/js/Icons/MapPin.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Menu.vue b/src/resources/js/Icons/Menu.vue
index 14480a1..c13c3f1 100644
--- a/src/resources/js/Icons/Menu.vue
+++ b/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>
diff --git a/src/resources/js/Icons/MessageCircle.vue b/src/resources/js/Icons/MessageCircle.vue
index 8e32652..c6b4415 100644
--- a/src/resources/js/Icons/MessageCircle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/MessageSquare.vue b/src/resources/js/Icons/MessageSquare.vue
index 93d7f45..d50acc1 100644
--- a/src/resources/js/Icons/MessageSquare.vue
+++ b/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>
diff --git a/src/resources/js/Icons/MinusCircle.vue b/src/resources/js/Icons/MinusCircle.vue
index 796abcf..6be9c93 100644
--- a/src/resources/js/Icons/MinusCircle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Moon.vue b/src/resources/js/Icons/Moon.vue
index 812eacc..54e1c65 100644
--- a/src/resources/js/Icons/Moon.vue
+++ b/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>
diff --git a/src/resources/js/Icons/MoreHorizontal.vue b/src/resources/js/Icons/MoreHorizontal.vue
index d382fd6..bd613eb 100644
--- a/src/resources/js/Icons/MoreHorizontal.vue
+++ b/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>
diff --git a/src/resources/js/Icons/MoreVertical.vue b/src/resources/js/Icons/MoreVertical.vue
index bbdd9ac..685065f 100644
--- a/src/resources/js/Icons/MoreVertical.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Octagon.vue b/src/resources/js/Icons/Octagon.vue
index 9305e9d..8eafce6 100644
--- a/src/resources/js/Icons/Octagon.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/resources/js/Icons/Package.vue b/src/resources/js/Icons/Package.vue
index 8d5198f..b1dd6a3 100644
--- a/src/resources/js/Icons/Package.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Percent.vue b/src/resources/js/Icons/Percent.vue
index bcd0d59..d576d9b 100644
--- a/src/resources/js/Icons/Percent.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Plus.vue b/src/resources/js/Icons/Plus.vue
index 5694180..ba5e3b7 100644
--- a/src/resources/js/Icons/Plus.vue
+++ b/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>
diff --git a/src/resources/js/Icons/PlusCircle.vue b/src/resources/js/Icons/PlusCircle.vue
index 5e527c7..a72735b 100644
--- a/src/resources/js/Icons/PlusCircle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Save.vue b/src/resources/js/Icons/Save.vue
index c5a2840..779d237 100644
--- a/src/resources/js/Icons/Save.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Search.vue b/src/resources/js/Icons/Search.vue
index a3655c7..041f735 100644
--- a/src/resources/js/Icons/Search.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Send.vue b/src/resources/js/Icons/Send.vue
index bd1781e..b92e4b4 100644
--- a/src/resources/js/Icons/Send.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Settings.vue b/src/resources/js/Icons/Settings.vue
index 1418710..9d2b108 100644
--- a/src/resources/js/Icons/Settings.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Slash.vue b/src/resources/js/Icons/Slash.vue
index 9eea005..9a6727d 100644
--- a/src/resources/js/Icons/Slash.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Sliders.vue b/src/resources/js/Icons/Sliders.vue
index bedcf18..76f1e45 100644
--- a/src/resources/js/Icons/Sliders.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Square.vue b/src/resources/js/Icons/Square.vue
index 5e17e8f..56ad417 100644
--- a/src/resources/js/Icons/Square.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Star.vue b/src/resources/js/Icons/Star.vue
index e30ee58..7be4e0e 100644
--- a/src/resources/js/Icons/Star.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Sun.vue b/src/resources/js/Icons/Sun.vue
index 043bc2f..e5b9006 100644
--- a/src/resources/js/Icons/Sun.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Tag.vue b/src/resources/js/Icons/Tag.vue
index af42467..31c44a5 100644
--- a/src/resources/js/Icons/Tag.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Tool.vue b/src/resources/js/Icons/Tool.vue
index b2c6355..2cfe056 100644
--- a/src/resources/js/Icons/Tool.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Translate.vue b/src/resources/js/Icons/Translate.vue
new file mode 100644
index 0000000..3c8592e
--- /dev/null
+++ b/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>
diff --git a/src/resources/js/Icons/Trash.vue b/src/resources/js/Icons/Trash.vue
index f5c5cda..fa871d1 100644
--- a/src/resources/js/Icons/Trash.vue
+++ b/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>
diff --git a/src/resources/js/Icons/TrendingDown.vue b/src/resources/js/Icons/TrendingDown.vue
index 850e377..8714e48 100644
--- a/src/resources/js/Icons/TrendingDown.vue
+++ b/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>
diff --git a/src/resources/js/Icons/TrendingUp.vue b/src/resources/js/Icons/TrendingUp.vue
index b73af23..1de26ac 100644
--- a/src/resources/js/Icons/TrendingUp.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Unlock.vue b/src/resources/js/Icons/Unlock.vue
index fd7e518..73be2a4 100644
--- a/src/resources/js/Icons/Unlock.vue
+++ b/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>
diff --git a/src/resources/js/Icons/UploadCloud.vue b/src/resources/js/Icons/UploadCloud.vue
index 55ba988..0794d25 100644
--- a/src/resources/js/Icons/UploadCloud.vue
+++ b/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>
diff --git a/src/resources/js/Icons/User.vue b/src/resources/js/Icons/User.vue
index e1173b4..6946255 100644
--- a/src/resources/js/Icons/User.vue
+++ b/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>
diff --git a/src/resources/js/Icons/UserCheck.vue b/src/resources/js/Icons/UserCheck.vue
index 9bb83e1..90368b9 100644
--- a/src/resources/js/Icons/UserCheck.vue
+++ b/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>
diff --git a/src/resources/js/Icons/UserMinus.vue b/src/resources/js/Icons/UserMinus.vue
index 3fb5bcf..fd33acd 100644
--- a/src/resources/js/Icons/UserMinus.vue
+++ b/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>
diff --git a/src/resources/js/Icons/UserPlus.vue b/src/resources/js/Icons/UserPlus.vue
index d5a7905..9737a14 100644
--- a/src/resources/js/Icons/UserPlus.vue
+++ b/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>
diff --git a/src/resources/js/Icons/UserX.vue b/src/resources/js/Icons/UserX.vue
index 59c4181..4aec323 100644
--- a/src/resources/js/Icons/UserX.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Users.vue b/src/resources/js/Icons/Users.vue
index 58896e3..cf14ebf 100644
--- a/src/resources/js/Icons/Users.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Wallet.vue b/src/resources/js/Icons/Wallet.vue
index 7eb8195..a5ba6a9 100644
--- a/src/resources/js/Icons/Wallet.vue
+++ b/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
diff --git a/src/resources/js/Icons/X.vue b/src/resources/js/Icons/X.vue
index 09515b1..cad7d52 100644
--- a/src/resources/js/Icons/X.vue
+++ b/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>
diff --git a/src/resources/js/Icons/XCircle.vue b/src/resources/js/Icons/XCircle.vue
index 53083f1..796bd4d 100644
--- a/src/resources/js/Icons/XCircle.vue
+++ b/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>
diff --git a/src/resources/js/Icons/XOctagon.vue b/src/resources/js/Icons/XOctagon.vue
index 4fdef9c..e4cac9a 100644
--- a/src/resources/js/Icons/XOctagon.vue
+++ b/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>
diff --git a/src/resources/js/Icons/Zap.vue b/src/resources/js/Icons/Zap.vue
index fc47cfe..dd7fef4 100644
--- a/src/resources/js/Icons/Zap.vue
+++ b/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>
diff --git a/src/resources/js/Icons/ZapOff.vue b/src/resources/js/Icons/ZapOff.vue
index 654f290..9a118d6 100644
--- a/src/resources/js/Icons/ZapOff.vue
+++ b/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>
diff --git a/src/resources/js/Icons/ZoomIn.vue b/src/resources/js/Icons/ZoomIn.vue
index bfebebf..14c08c1 100644
--- a/src/resources/js/Icons/ZoomIn.vue
+++ b/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>
diff --git a/src/resources/js/Icons/ZoomOut.vue b/src/resources/js/Icons/ZoomOut.vue
index d214f07..b7c044e 100644
--- a/src/resources/js/Icons/ZoomOut.vue
+++ b/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>