@umbra.ui/icons 0.1.0

package/src/icons/Toggle3Icon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 9C10.75 11.6234 8.62335 13.75 6 13.75H12C14.6234 13.75 16.75 11.6234 16.75 9C16.75 6.37665 14.6234 4.25 12 4.25H6C8.62335 4.25 10.75 6.37665 10.75 9Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M6 13.75H12C14.623 13.75 16.75 11.623 16.75 9C16.75 6.377 14.623 4.25 12 4.25H6" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6 13.75C8.62335 13.75 10.75 11.6234 10.75 9C10.75 6.37665 8.62335 4.25 6 4.25C3.37665 4.25 1.25 6.37665 1.25 9C1.25 11.6234 3.37665 13.75 6 13.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/TrashIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M13.605 4.75L13.099 14.355C13.043 15.417 12.165 16.25 11.102 16.25H6.89698C5.83298 16.25 4.95598 15.417 4.89998 14.355L4.39398 4.75" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M13.605 4.75L13.099 14.355C13.043 15.417 12.165 16.25 11.102 16.25H6.89698C5.83298 16.25 4.95598 15.417 4.89998 14.355L4.39398 4.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 4.75H15.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-color="color-2" fill="none" />
+      <path d="M6.75 4.75V2.75C6.75 2.198 7.198 1.75 7.75 1.75H10.25C10.802 1.75 11.25 2.198 11.25 2.75V4.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-color="color-2" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/TriangleWarningIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M7.63801 3.49498L2.21301 12.891C1.60801 13.939 2.36401 15.25 3.57501 15.25H14.425C15.636 15.25 16.392 13.94 15.787 12.891L10.362 3.49498C9.75701 2.44698 8.24301 2.44698 7.63801 3.49498Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M7.63801 3.49498L2.21301 12.891C1.60801 13.939 2.36401 15.25 3.57501 15.25H14.425C15.636 15.25 16.392 13.94 15.787 12.891L10.362 3.49498C9.75701 2.44698 8.24301 2.44698 7.63801 3.49498Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 6.5V10" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 13.569C8.448 13.569 8 13.12 8 12.569C8 12.018 8.448 11.569 9 11.569C9.552 11.569 10 12.018 10 12.569C10 13.12 9.552 13.569 9 13.569Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/UfoIcon.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M2.021 7.824C2.164 8.662 4.164 9.058 6.865 8.894L6.87794 8.89192L7.0242 7.63822L10.9643 6.95766L11.6324 8.1269L11.638 8.126C14.492 7.378 16.465 6.269 16.314 5.383C16.127 4.289 12.776 3.949 8.829 4.623C4.882 5.297 1.834 6.73 2.021 7.824Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.75 2.5C15.1642 2.5 15.5 2.16421 15.5 1.75C15.5 1.33579 15.1642 1 14.75 1C14.3358 1 14 1.33579 14 1.75C14 2.16421 14.3358 2.5 14.75 2.5Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M3.869 1.894L2.922 1.579L2.607 0.632C2.504 0.326 1.998 0.326 1.895 0.632L1.58 1.579L0.632999 1.894C0.479999 1.945 0.376999 2.088 0.376999 2.25C0.376999 2.412 0.480999 2.555 0.632999 2.606L1.58 2.921L1.895 3.868C1.946 4.021 2.089 4.124 2.251 4.124C2.413 4.124 2.556 4.02 2.607 3.868L2.922 2.921L3.869 2.606C4.022 2.555 4.125 2.412 4.125 2.25C4.125 2.088 4.021 1.945 3.869 1.894Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M5.22301 5.526C5.21101 5.411 5.20801 5.31 5.20801 5.192C5.20801 3.305 6.73801 1.775 8.62501 1.775C10.2 1.775 11.526 2.841 11.922 4.291" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.865 8.894C4.164 9.058 2.164 8.662 2.021 7.824C1.834 6.73 4.882 5.297 8.829 4.623C12.776 3.949 16.127 4.289 16.314 5.383C16.465 6.269 14.492 7.378 11.638 8.126" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.006 7.689L6 16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11 7L16.25 16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.05613 7.65109C10.1583 7.45837 11.0275 7.16277 10.9974 6.99086C10.9674 6.81894 10.0495 6.83581 8.94728 7.02854C7.84507 7.22126 6.97592 7.51686 7.00598 7.68877C7.03604 7.86068 7.95392 7.84381 9.05613 7.65109Z" :fill="color" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/UnorderedListIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M3.75 7.25C4.85457 7.25 5.75 6.35457 5.75 5.25C5.75 4.14543 4.85457 3.25 3.75 3.25C2.64543 3.25 1.75 4.14543 1.75 5.25C1.75 6.35457 2.64543 7.25 3.75 7.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.75 14.75C4.85457 14.75 5.75 13.8546 5.75 12.75C5.75 11.6454 4.85457 10.75 3.75 10.75C2.64543 10.75 1.75 11.6454 1.75 12.75C1.75 13.8546 2.64543 14.75 3.75 14.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.75 7.25C4.85457 7.25 5.75 6.35457 5.75 5.25C5.75 4.14543 4.85457 3.25 3.75 3.25C2.64543 3.25 1.75 4.14543 1.75 5.25C1.75 6.35457 2.64543 7.25 3.75 7.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.75 14.75C4.85457 14.75 5.75 13.8546 5.75 12.75C5.75 11.6454 4.85457 10.75 3.75 10.75C2.64543 10.75 1.75 11.6454 1.75 12.75C1.75 13.8546 2.64543 14.75 3.75 14.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.75 5.25H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.75 12.75H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/UserIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M9 7.25C10.5188 7.25 11.75 6.01878 11.75 4.5C11.75 2.98122 10.5188 1.75 9 1.75C7.48122 1.75 6.25 2.98122 6.25 4.5C6.25 6.01878 7.48122 7.25 9 7.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 7.25C10.5188 7.25 11.75 6.01878 11.75 4.5C11.75 2.98122 10.5188 1.75 9 1.75C7.48122 1.75 6.25 2.98122 6.25 4.5C6.25 6.01878 7.48122 7.25 9 7.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.762 15.516C14.622 15.245 15.074 14.295 14.709 13.471C13.739 11.28 11.55 9.75 8.99999 9.75C6.44999 9.75 4.26099 11.28 3.29099 13.471C2.92599 14.296 3.37799 15.245 4.23799 15.516C5.46299 15.902 7.08399 16.25 8.99999 16.25C10.916 16.25 12.537 15.902 13.762 15.516Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/UserLaptopIcon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M14.925 16.25H8.75L10.618 12.047C10.698 11.866 10.877 11.75 11.075 11.75H16.481C16.843 11.75 17.085 12.122 16.938 12.453L15.382 15.953C15.302 16.134 15.123 16.25 14.925 16.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8 9.25C10.0711 9.25 11.75 7.57107 11.75 5.5C11.75 3.42893 10.0711 1.75 8 1.75C5.92893 1.75 4.25 3.42893 4.25 5.5C4.25 7.57107 5.92893 9.25 8 9.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.953 15C3.251 13.042 5.475 11.75 8 11.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M14.925 16.25H8.75L10.618 12.047C10.698 11.866 10.877 11.75 11.075 11.75H16.481C16.843 11.75 17.085 12.122 16.938 12.453L15.382 15.953C15.302 16.134 15.123 16.25 14.925 16.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.75 16.25H5.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/UserSearchIcon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M9 7.25C10.5188 7.25 11.75 6.01878 11.75 4.5C11.75 2.98122 10.5188 1.75 9 1.75C7.48122 1.75 6.25 2.98122 6.25 4.5C6.25 6.01878 7.48122 7.25 9 7.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 7.25C10.5188 7.25 11.75 6.01878 11.75 4.5C11.75 2.98122 10.5188 1.75 9 1.75C7.48122 1.75 6.25 2.98122 6.25 4.5C6.25 6.01878 7.48122 7.25 9 7.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13 15.25C14.2426 15.25 15.25 14.2426 15.25 13C15.25 11.7574 14.2426 10.75 13 10.75C11.7574 10.75 10.75 11.7574 10.75 13C10.75 14.2426 11.7574 15.25 13 15.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.52199 9.789C9.34799 9.774 9.17699 9.75 8.99999 9.75C6.44899 9.75 4.26099 11.28 3.29099 13.47C2.92599 14.295 3.37799 15.244 4.23799 15.515C5.46299 15.901 7.08399 16.249 8.99999 16.249C9.18599 16.249 9.35499 16.232 9.53499 16.226" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M14.59 14.59L16.25 16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/UsersIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M16.494 11.3635C16.688 11.8785 16.381 12.4475 15.858 12.6225C14.9814 12.9153 13.8077 13.1965 12.4107 13.2436C12.3924 13.1857 12.3724 13.1278 12.3506 13.0698L12.3505 13.0697C11.7372 11.4421 10.5393 10.0973 9.00919 9.29768C9.82907 8.64292 10.8681 8.2515 12 8.2515C14.058 8.2515 15.809 9.54549 16.494 11.3635Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12 5.75C13.1046 5.75 14 4.85457 14 3.75C14 2.64543 13.1046 1.75 12 1.75C10.8954 1.75 10 2.64543 10 3.75C10 4.85457 10.8954 5.75 12 5.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 8.25C6.85457 8.25 7.75 7.35457 7.75 6.25C7.75 5.14543 6.85457 4.25 5.75 4.25C4.64543 4.25 3.75 5.14543 3.75 6.25C3.75 7.35457 4.64543 8.25 5.75 8.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.609 15.122C10.132 14.947 10.439 14.378 10.245 13.863C9.56 12.045 7.809 10.751 5.751 10.751C3.693 10.751 1.942 12.045 1.257 13.863C1.063 14.379 1.37 14.948 1.893 15.122C2.855 15.443 4.174 15.75 5.752 15.75C7.33 15.75 8.648 15.443 9.609 15.122Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12 5.75C13.1046 5.75 14 4.85457 14 3.75C14 2.64543 13.1046 1.75 12 1.75C10.8954 1.75 10 2.64543 10 3.75C10 4.85457 10.8954 5.75 12 5.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.749 13.227C13.997 13.15 15.053 12.891 15.858 12.622C16.381 12.447 16.688 11.878 16.494 11.363C15.809 9.545 14.058 8.251 12 8.251C11.023 8.251 10.115 8.543 9.35699 9.044" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Vault3Icon.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 2.75H13.25C14.3546 2.75 15.25 3.64543 15.25 4.75V13.25C15.25 14.3546 14.3546 15.25 13.25 15.25H4.75C3.64543 15.25 2.75 14.3546 2.75 13.25V4.75C2.75 3.64543 3.64543 2.75 4.75 2.75ZM10.75 8.25C10.75 9.2165 9.9665 10 9 10C8.0335 10 7.25 9.2165 7.25 8.25C7.25 7.2835 8.0335 6.5 9 6.5C9.9665 6.5 10.75 7.2835 10.75 8.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M13.25 2.75H4.75C3.64543 2.75 2.75 3.64543 2.75 4.75V13.25C2.75 14.3546 3.64543 15.25 4.75 15.25H13.25C14.3546 15.25 15.25 14.3546 15.25 13.25V4.75C15.25 3.64543 14.3546 2.75 13.25 2.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.75 15.25V16.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.25 15.25V16.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.75 9H3.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.75 5.75H3.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.75 12.25H3.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 10C9.9665 10 10.75 9.2165 10.75 8.25C10.75 7.2835 9.9665 6.5 9 6.5C8.0335 6.5 7.25 7.2835 7.25 8.25C7.25 9.2165 8.0335 10 9 10Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 11.75V10" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/VideoIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M10.25 3.75H3.75C2.64543 3.75 1.75 4.64543 1.75 5.75V12.25C1.75 13.3546 2.64543 14.25 3.75 14.25H10.25C11.3546 14.25 12.25 13.3546 12.25 12.25V5.75C12.25 4.64543 11.3546 3.75 10.25 3.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.25 8L16.509 5.658C16.842 5.475 17.25 5.716 17.25 6.096V11.905C17.25 12.285 16.842 12.526 16.509 12.343L12.25 10.001" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.25 3.75H3.75C2.64543 3.75 1.75 4.64543 1.75 5.75V12.25C1.75 13.3546 2.64543 14.25 3.75 14.25H10.25C11.3546 14.25 12.25 13.3546 12.25 12.25V5.75C12.25 4.64543 11.3546 3.75 10.25 3.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.75 7.5C5.16421 7.5 5.5 7.16421 5.5 6.75C5.5 6.33579 5.16421 6 4.75 6C4.33579 6 4 6.33579 4 6.75C4 7.16421 4.33579 7.5 4.75 7.5Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/VolumeIcon.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M8 5.75H4.25C3.422 5.75 2.75 6.422 2.75 7.25V10.75C2.75 11.578 3.422 12.25 4.25 12.25H8L13.48 15.758C13.813 15.971 14.25 15.732 14.25 15.337V2.664C14.25 2.269 13.813 2.03 13.48 2.243L8 5.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8 5.75H4.25C3.422 5.75 2.75 6.422 2.75 7.25V10.75C2.75 11.578 3.422 12.25 4.25 12.25H8L13.48 15.758C13.813 15.971 14.25 15.732 14.25 15.337V2.664C14.25 2.269 13.813 2.03 13.48 2.243L8 5.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/VolumeUpIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path d="M5 5.75H2.25C1.422 5.75 0.75 6.422 0.75 7.25V10.75C0.75 11.578 1.422 12.25 2.25 12.25H5L10.48 15.758C10.813 15.971 11.25 15.732 11.25 15.337V2.664C11.25 2.269 10.813 2.03 10.48 2.243L5 5.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5 5.75H2.25C1.422 5.75 0.75 6.422 0.75 7.25V10.75C0.75 11.578 1.422 12.25 2.25 12.25H5L10.48 15.758C10.813 15.971 11.25 15.732 11.25 15.337V2.664C11.25 2.269 10.813 2.03 10.48 2.243L5 5.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.914 7.586C14.695 8.367 14.695 9.633 13.914 10.414" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.859 5.64101C17.714 7.49601 17.714 10.504 15.859 12.359" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Wallet2CircuitIcon.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title />
+    <g stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 13V11.25H13C12.034 11.25 11.25 10.466 11.25 9.5C11.25 8.533 12.034 7.75 13 7.75H15.75V5.75C15.75 4.645 14.855 3.75 13.75 3.75H4C2.895 3.75 2 4.645 2 5.75V13C2 14.105 2.895 15 4 15H6.45067C6.32305 14.7794 6.25 14.5232 6.25 14.25C6.25 13.4216 6.92157 12.75 7.75 12.75C8.57843 12.75 9.25 13.4216 9.25 14.25C9.25 14.5232 9.17695 14.7794 9.04933 15H13.75C14.855 15 15.75 14.105 15.75 13ZM7.75 9C7.75 9.82843 7.07843 10.5 6.25 10.5C5.42157 10.5 4.75 9.82843 4.75 9C4.75 8.17157 5.42157 7.5 6.25 7.5C7.07843 7.5 7.75 8.17157 7.75 9Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.25 5.49998C2.25 3.76698 3.499 2.28698 5.207 1.99498L11.769 0.874982C12.203 0.800982 12.635 1.01998 12.832 1.41398L12.885 1.51998" />
+      <path d="M7.75 15.75C8.57843 15.75 9.25 15.0784 9.25 14.25C9.25 13.4216 8.57843 12.75 7.75 12.75C6.92157 12.75 6.25 13.4216 6.25 14.25C6.25 15.0784 6.92157 15.75 7.75 15.75Z" />
+      <path d="M1.75 14.25H6.25" />
+      <path d="M6.25 10.5C7.07843 10.5 7.75 9.82843 7.75 9C7.75 8.17157 7.07843 7.5 6.25 7.5C5.42157 7.5 4.75 8.17157 4.75 9C4.75 9.82843 5.42157 10.5 6.25 10.5Z" />
+      <path d="M5.19 10.06L3.793 11.457C3.605 11.645 3.351 11.75 3.086 11.75H1.75" />
+      <path d="M15.75 11.25V13.25C15.75 14.355 14.855 15.25 13.75 15.25H11.623" />
+      <path d="M2.25 9V5.75C2.25 4.645 3.145 3.75 4.25 3.75H13.75C14.855 3.75 15.75 4.645 15.75 5.75V7.75" />
+      <path d="M15.75 11.25H13C12.034 11.25 11.25 10.466 11.25 9.5C11.25 8.533 12.034 7.75 13 7.75H15.75C16.302 7.75 16.75 8.198 16.75 8.75V10.25C16.75 10.802 16.302 11.25 15.75 11.25Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Wallet2Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M15.75 13.25V11.25H13C12.034 11.25 11.25 10.466 11.25 9.5C11.25 8.533 12.034 7.75 13 7.75H15.75V5.75C15.75 4.645 14.855 3.75 13.75 3.75H4.25C3.145 3.75 2.25 4.645 2.25 5.75V13.25C2.25 14.355 3.145 15.25 4.25 15.25H13.75C14.855 15.25 15.75 14.355 15.75 13.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.25 5.49998C2.25 3.76698 3.499 2.28698 5.207 1.99498L11.769 0.874982C12.203 0.800982 12.635 1.01998 12.832 1.41398L12.885 1.51998" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.75 11.25V13.25C15.75 14.355 14.855 15.25 13.75 15.25H4.25C3.145 15.25 2.25 14.355 2.25 13.25V5.75C2.25 4.645 3.145 3.75 4.25 3.75H13.75C14.855 3.75 15.75 4.645 15.75 5.75V7.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.75 11.25H13C12.034 11.25 11.25 10.466 11.25 9.5C11.25 8.533 12.034 7.75 13 7.75H15.75C16.302 7.75 16.75 8.198 16.75 8.75V10.25C16.75 10.802 16.302 11.25 15.75 11.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/WandSparkleIcon.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+        <title />
+    <g :fill="color">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.6414 7.60865L10.3913 5.35864L3.0425 12.7075C2.65197 13.098 2.65197 13.7312 3.0425 14.1217L3.8783 14.9575C4.26882 15.348 4.90199 15.348 5.29251 14.9575L12.6414 7.60865Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.6966 3.05335L3.04249 12.7075C2.65197 13.098 2.65197 13.7312 3.04249 14.1217L3.87829 14.9575C4.26882 15.348 4.90198 15.348 5.29251 14.9575L14.9466 5.30337C15.3372 4.91284 15.3372 4.27968 14.9466 3.88915L14.1108 3.05335C13.7203 2.66283 13.0871 2.66283 12.6966 3.05335Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.387 5.363L12.637 7.613" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.24301 3.492L6.29701 3.177L5.98101 2.23C5.87901 1.924 5.37201 1.924 5.27001 2.23L4.95401 3.177L4.00801 3.492C3.85501 3.543 3.75101 3.686 3.75101 3.848C3.75101 4.01 3.85501 4.153 4.00801 4.204L4.95401 4.519L5.27001 5.466C5.32101 5.619 5.46401 5.722 5.62501 5.722C5.78601 5.722 5.93001 5.618 5.98001 5.466L6.29601 4.519L7.24201 4.204C7.39501 4.153 7.49901 4.01 7.49901 3.848C7.49901 3.686 7.39601 3.543 7.24301 3.492Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M16.658 11.99L15.395 11.569L14.974 10.306C14.837 9.898 14.162 9.898 14.025 10.306L13.604 11.569L12.341 11.99C12.137 12.058 11.999 12.249 11.999 12.464C11.999 12.679 12.137 12.87 12.341 12.938L13.604 13.359L14.025 14.622C14.093 14.826 14.285 14.964 14.5 14.964C14.715 14.964 14.906 14.826 14.975 14.622L15.396 13.359L16.659 12.938C16.863 12.87 17.001 12.679 17.001 12.464C17.001 12.249 16.862 12.058 16.658 11.99Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M9.25 2.5C9.66421 2.5 10 2.16421 10 1.75C10 1.33579 9.66421 1 9.25 1C8.83579 1 8.5 1.33579 8.5 1.75C8.5 2.16421 8.83579 2.5 9.25 2.5Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>