@umbra.ui/icons 0.4.0 → 0.5.0

package/src/icons/EclipseIcon.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M5.5 9C5.5 5.646 7.781 2.831 10.875 2.004C10.276 1.844 9.65 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25C9.65 16.25 10.276 16.156 10.875 15.996C7.781 15.169 5.5 12.354 5.5 9Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.876 1.995C13.971 2.822 16.25 5.645 16.25 9C16.25 12.355 13.978 15.169 10.891 16.001" />
+      <path d="M5.5 9C5.5 5.646 7.781 2.831 10.875 2.004C10.276 1.844 9.65 1.75 9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 13.004 4.996 16.25 9 16.25C9.65 16.25 10.276 16.156 10.875 15.996C7.781 15.169 5.5 12.354 5.5 9Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/FileLockIcon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M16.25 13.75H12.25C11.6977 13.75 11.25 14.1977 11.25 14.75V16.25C11.25 16.8023 11.6977 17.25 12.25 17.25H16.25C16.8023 17.25 17.25 16.8023 17.25 16.25V14.75C17.25 14.1977 16.8023 13.75 16.25 13.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 1.83956C10.6212 1.78103 10.4801 1.75 10.336 1.75H4.75C3.645 1.75 2.75 2.645 2.75 3.75V14.25C2.75 15.355 3.645 16.25 4.75 16.25H9V14.75C9 13.5961 9.60138 12.5826 10.5078 12.0059C10.6336 10.049 12.2614 8.5 14.25 8.5C14.5341 8.5 14.8108 8.53162 15.0769 8.59152C15.1853 8.61593 15.25 8.47674 15.25 8.3656V6.664C15.25 6.51978 15.2189 6.37883 15.1603 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.83956Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 6.75H7.75" />
+      <path d="M5.75 9.75H10.25" />
+      <path d="M15.16 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.85199" />
+      <path d="M16.25 13.75H12.25C11.6977 13.75 11.25 14.1977 11.25 14.75V16.25C11.25 16.8023 11.6977 17.25 12.25 17.25H16.25C16.8023 17.25 17.25 16.8023 17.25 16.25V14.75C17.25 14.1977 16.8023 13.75 16.25 13.75Z" />
+      <path d="M12.75 13.75V12.25C12.75 11.422 13.422 10.75 14.25 10.75C15.078 10.75 15.75 11.422 15.75 12.25V13.75" />
+      <path d="M15.25 7.87568V6.66498C15.25 6.39988 15.145 6.14498 14.957 5.95798L11.043 2.04388C10.855 1.85588 10.601 1.75089 10.336 1.75089H4.75C3.645 1.75089 2.75 2.64689 2.75 3.75089V14.2499C2.75 15.3539 3.645 16.2499 4.75 16.2499H8.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/FileMusicIcon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M13.25 17.25C14.0784 17.25 14.75 16.5784 14.75 15.75C14.75 14.9216 14.0784 14.25 13.25 14.25C12.4216 14.25 11.75 14.9216 11.75 15.75C11.75 16.5784 12.4216 17.25 13.25 17.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 1.83956C10.6212 1.78103 10.4801 1.75 10.336 1.75H4.75C3.645 1.75 2.75 2.645 2.75 3.75V14.25C2.75 15.355 3.645 16.25 4.75 16.25H9.53304C9.51125 16.0864 9.5 15.9195 9.5 15.75C9.5 13.9358 10.7883 12.4225 12.5 12.075V10.75C12.5 9.83613 13.0528 9.01303 13.8987 8.66727C14.2948 8.50538 14.7183 8.46319 15.1224 8.53104C15.2367 8.55024 15.25 8.35204 15.25 8.2361V6.664C15.25 6.51978 15.2189 6.37883 15.1603 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.83956Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 6.75H7.75" />
+      <path d="M5.75 9.75H10.25" />
+      <path d="M15.16 6.24999H11.75C11.198 6.24999 10.75 5.80199 10.75 5.24999V1.85199" />
+      <path d="M13.25 17.25C14.0784 17.25 14.75 16.5784 14.75 15.75C14.75 14.9216 14.0784 14.25 13.25 14.25C12.4216 14.25 11.75 14.9216 11.75 15.75C11.75 16.5784 12.4216 17.25 13.25 17.25Z" />
+      <path d="M14.75 15.75V10.75C15.067 11.073 15.48 11.442 16 11.797C16.45 12.104 16.879 12.332 17.25 12.5" />
+      <path d="M15.25 7.7974V6.6641C15.25 6.399 15.145 6.1441 14.957 5.9571L11.043 2.043C10.855 1.855 10.601 1.75 10.336 1.75H4.75C3.645 1.75 2.75 2.646 2.75 3.75V14.25C2.75 15.354 3.645 16.25 4.75 16.25H8.80051" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/GhostWorriedIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M9 16.25C10.438 16.25 10.531 14.75 12 14.75C13.469 14.75 13.5 16.25 15.25 16.25V8C15.25 4.548 12.452 1.75 9 1.75C5.548 1.75 2.75 4.548 2.75 8V16.25C4.5 16.25 4.531 14.75 6 14.75C7.469 14.75 7.562 16.25 9 16.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 16.25C10.438 16.25 10.531 14.75 12 14.75C13.469 14.75 13.5 16.25 15.25 16.25V8C15.25 4.548 12.452 1.75 9 1.75C5.548 1.75 2.75 4.548 2.75 8V16.25C4.5 16.25 4.531 14.75 6 14.75C7.469 14.75 7.562 16.25 9 16.25Z" />
+      <path d="M6 10C6.55228 10 7 9.55228 7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M12 10C12.5523 10 13 9.55228 13 9C13 8.44772 12.5523 8 12 8C11.4477 8 11 8.44772 11 9C11 9.55228 11.4477 10 12 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M10 12H8C7.724 12 7.5 11.776 7.5 11.5C7.5 10.672 8.172 10 9 10C9.828 10 10.5 10.672 10.5 11.5C10.5 11.776 10.276 12 10 12Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Headphones3Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M5.75 9.25C4.9216 9.25 4.25 9.9216 4.25 10.75V14.25C4.25 15.0784 4.9216 15.75 5.75 15.75C6.5784 15.75 7.25 15.0784 7.25 14.25V10.75C7.25 9.9216 6.5784 9.25 5.75 9.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.25 9.25C11.4216 9.25 10.75 9.9216 10.75 10.75V14.25C10.75 15.0784 11.4216 15.75 12.25 15.75C13.0784 15.75 13.75 15.0784 13.75 14.25V10.75C13.75 9.9216 13.0784 9.25 12.25 9.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 9.25C4.9216 9.25 4.25 9.9216 4.25 10.75V14.25C4.25 15.0784 4.9216 15.75 5.75 15.75C6.5784 15.75 7.25 15.0784 7.25 14.25V10.75C7.25 9.9216 6.5784 9.25 5.75 9.25Z" />
+      <path d="M12.25 9.25C11.4216 9.25 10.75 9.9216 10.75 10.75V14.25C10.75 15.0784 11.4216 15.75 12.25 15.75C13.0784 15.75 13.75 15.0784 13.75 14.25V10.75C13.75 9.9216 13.0784 9.25 12.25 9.25Z" />
+      <path d="M16.25 12.75V8.25C16.25 4.936 13.564 2.25 10.25 2.25H7.75C4.436 2.25 1.75 4.936 1.75 8.25V12.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/InstallIcon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path opacity="0.3" d="M14.25 2.75H3.75C2.6454 2.75 1.75 3.645 1.75 4.75V11.25C1.75 12.355 2.6454 13.25 3.75 13.25H14.25C15.3546 13.25 16.25 12.355 16.25 11.25V4.75C16.25 3.645 15.3546 2.75 14.25 2.75Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 15.75C6.508 15.511 7.628 15.25 9 15.25C9.795 15.25 10.941 15.338 12.25 15.75" />
+      <path d="M9 12.75V15.25" />
+      <path d="M11.5 7.25L9 9.75L6.5 7.25" />
+      <path d="M6 2.75H3.75C2.6454 2.75 1.75 3.645 1.75 4.75V10.75C1.75 11.855 2.6454 12.75 3.75 12.75H14.25C15.3546 12.75 16.25 11.855 16.25 10.75V4.75C16.25 3.645 15.3546 2.75 14.25 2.75H12" />
+      <path d="M9 9.75V2.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Itinerary3Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M5.75 11.75H3.75C3.19772 11.75 2.75 12.1977 2.75 12.75V14.75C2.75 15.3023 3.19772 15.75 3.75 15.75H5.75C6.30228 15.75 6.75 15.3023 6.75 14.75V12.75C6.75 12.1977 6.30228 11.75 5.75 11.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M4.75 6.25C5.85457 6.25 6.75 5.35457 6.75 4.25C6.75 3.14543 5.85457 2.25 4.75 2.25C3.64543 2.25 2.75 3.14543 2.75 4.25C2.75 5.35457 3.64543 6.25 4.75 6.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.75 11.75H3.75C3.19772 11.75 2.75 12.1977 2.75 12.75V14.75C2.75 15.3023 3.19772 15.75 3.75 15.75H5.75C6.30228 15.75 6.75 15.3023 6.75 14.75V12.75C6.75 12.1977 6.30228 11.75 5.75 11.75Z" />
+      <path d="M4.75 6.25C5.85457 6.25 6.75 5.35457 6.75 4.25C6.75 3.14543 5.85457 2.25 4.75 2.25C3.64543 2.25 2.75 3.14543 2.75 4.25C2.75 5.35457 3.64543 6.25 4.75 6.25Z" />
+      <path d="M9.25 4.25H13.25C14.355 4.25 15.25 5.145 15.25 6.25V11.75C15.25 12.855 14.355 13.75 13.25 13.75H9.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Keyboard2Icon.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M14.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.25H14.25C15.3546 14.25 16.25 13.3546 16.25 12.25V5.75C16.25 4.64543 15.3546 3.75 14.25 3.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.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.25H14.25C15.3546 14.25 16.25 13.3546 16.25 12.25V5.75C16.25 4.64543 15.3546 3.75 14.25 3.75Z" />
+      <path d="M11.25 11.25H6.75" />
+      <path d="M7.875 8H7.375C7.09886 8 6.875 8.22386 6.875 8.5V9C6.875 9.27614 7.09886 9.5 7.375 9.5H7.875C8.15114 9.5 8.375 9.27614 8.375 9V8.5C8.375 8.22386 8.15114 8 7.875 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M5.125 8H4.625C4.34886 8 4.125 8.22386 4.125 8.5V9C4.125 9.27614 4.34886 9.5 4.625 9.5H5.125C5.40114 9.5 5.625 9.27614 5.625 9V8.5C5.625 8.22386 5.40114 8 5.125 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M10.625 8H10.125C9.84886 8 9.625 8.22386 9.625 8.5V9C9.625 9.27614 9.84886 9.5 10.125 9.5H10.625C10.9011 9.5 11.125 9.27614 11.125 9V8.5C11.125 8.22386 10.9011 8 10.625 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M13.375 8H12.875C12.5989 8 12.375 8.22386 12.375 8.5V9C12.375 9.27614 12.5989 9.5 12.875 9.5H13.375C13.6511 9.5 13.875 9.27614 13.875 9V8.5C13.875 8.22386 13.6511 8 13.375 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M6.5 6H6C5.72386 6 5.5 6.22386 5.5 6.5V7C5.5 7.27614 5.72386 7.5 6 7.5H6.5C6.77614 7.5 7 7.27614 7 7V6.5C7 6.22386 6.77614 6 6.5 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M9.25 6H8.75C8.47386 6 8.25 6.22386 8.25 6.5V7C8.25 7.27614 8.47386 7.5 8.75 7.5H9.25C9.52614 7.5 9.75 7.27614 9.75 7V6.5C9.75 6.22386 9.52614 6 9.25 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M12 6H11.5C11.2239 6 11 6.22386 11 6.5V7C11 7.27614 11.2239 7.5 11.5 7.5H12C12.2761 7.5 12.5 7.27614 12.5 7V6.5C12.5 6.22386 12.2761 6 12 6Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Keyboard4HideDownIcon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M14.25 3.75H3.75C2.64543 3.75 1.75 4.64543 1.75 5.75V10.25C1.75 11.3546 2.64543 12.25 3.75 12.25H14.25C15.3546 12.25 16.25 11.3546 16.25 10.25V5.75C16.25 4.64543 15.3546 3.75 14.25 3.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.25 3.75H3.75C2.64543 3.75 1.75 4.64543 1.75 5.75V10.25C1.75 11.3546 2.64543 12.25 3.75 12.25H14.25C15.3546 12.25 16.25 11.3546 16.25 10.25V5.75C16.25 4.64543 15.3546 3.75 14.25 3.75Z" />
+      <path d="M11.25 9.25H6.75" />
+      <path d="M7.875 6H7.375C7.09886 6 6.875 6.22386 6.875 6.5V7C6.875 7.27614 7.09886 7.5 7.375 7.5H7.875C8.15114 7.5 8.375 7.27614 8.375 7V6.5C8.375 6.22386 8.15114 6 7.875 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M5.125 6H4.625C4.34886 6 4.125 6.22386 4.125 6.5V7C4.125 7.27614 4.34886 7.5 4.625 7.5H5.125C5.40114 7.5 5.625 7.27614 5.625 7V6.5C5.625 6.22386 5.40114 6 5.125 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M10.625 6H10.125C9.84886 6 9.625 6.22386 9.625 6.5V7C9.625 7.27614 9.84886 7.5 10.125 7.5H10.625C10.9011 7.5 11.125 7.27614 11.125 7V6.5C11.125 6.22386 10.9011 6 10.625 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M13.375 6H12.875C12.5989 6 12.375 6.22386 12.375 6.5V7C12.375 7.27614 12.5989 7.5 12.875 7.5H13.375C13.6511 7.5 13.875 7.27614 13.875 7V6.5C13.875 6.22386 13.6511 6 13.375 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M11.5 14.75L9 17.25L6.5 14.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MediaPlaylistIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M11.152 8.568L7.50102 6.439C7.16802 6.245 6.74902 6.485 6.74902 6.871V11.13C6.74902 11.516 7.16802 11.756 7.50102 11.562L11.152 9.433C11.483 9.24 11.483 8.762 11.152 8.569V8.568Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8 16.182C4.469 15.695 1.75 12.665 1.75 9C1.75 4.996 4.996 1.75 9 1.75C13.004 1.75 16.25 4.996 16.25 9C16.25 9.339 16.227 9.673 16.182 10" />
+      <path d="M10.75 16.25H16.25" />
+      <path d="M10.75 12.75H16.25" />
+      <path d="M11.152 8.568L7.50102 6.439C7.16802 6.245 6.74902 6.485 6.74902 6.871V11.13C6.74902 11.516 7.16802 11.756 7.50102 11.562L11.152 9.433C11.483 9.24 11.483 8.762 11.152 8.569V8.568Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Menu2Icon.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M1.75 5.75H16.25" />
+      <path d="M1.75 12.25H16.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Menu3Icon.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M2.25 9H15.75" />
+      <path d="M9.75 3.75H15.75" />
+      <path d="M2.25 14.25H8.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MenuArrowLeftIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M5.5 12.25L2.25 9L5.5 5.75" />
+      <path d="M2.25 9H15.75" />
+      <path d="M8.75 14.75H15.75" />
+      <path d="M8.75 3.25H15.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MoonFullIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M9 16.25C13.0041 16.25 16.25 13.0041 16.25 9C16.25 4.99594 13.0041 1.75 9 1.75C4.99594 1.75 1.75 4.99594 1.75 9C1.75 13.0041 4.99594 16.25 9 16.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9.75 12.5C10.1642 12.5 10.5 12.1642 10.5 11.75C10.5 11.3358 10.1642 11 9.75 11C9.33579 11 9 11.3358 9 11.75C9 12.1642 9.33579 12.5 9.75 12.5Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M6.5 10C7.05228 10 7.5 9.55228 7.5 9C7.5 8.44772 7.05228 8 6.5 8C5.94772 8 5.5 8.44772 5.5 9C5.5 9.55228 5.94772 10 6.5 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M10.75 8C11.4404 8 12 7.44036 12 6.75C12 6.05964 11.4404 5.5 10.75 5.5C10.0596 5.5 9.5 6.05964 9.5 6.75C9.5 7.44036 10.0596 8 10.75 8Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M9 16.25C13.0041 16.25 16.25 13.0041 16.25 9C16.25 4.99594 13.0041 1.75 9 1.75C4.99594 1.75 1.75 4.99594 1.75 9C1.75 13.0041 4.99594 16.25 9 16.25Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MoonStarsIcon.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M13 11.75C9.548 11.75 6.75 8.952 6.75 5.5C6.75 4.148 7.183 2.901 7.912 1.878C4.548 2.506 2 5.453 2 9C2 13.004 5.246 16.25 9.25 16.25C12.622 16.25 15.448 13.944 16.259 10.826C15.309 11.409 14.196 11.75 13 11.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M13 11.75C9.548 11.75 6.75 8.952 6.75 5.5C6.75 4.148 7.183 2.901 7.912 1.878C4.548 2.506 2 5.453 2 9C2 13.004 5.246 16.25 9.25 16.25C12.622 16.25 15.448 13.944 16.259 10.826C15.309 11.409 14.196 11.75 13 11.75Z" />
+      <path d="M12.743 4.492L11.797 4.177L11.481 3.23C11.379 2.924 10.872 2.924 10.77 3.23L10.454 4.177L9.508 4.492C9.355 4.543 9.251 4.686 9.251 4.848C9.251 5.01 9.355 5.153 9.508 5.204L10.454 5.519L10.77 6.466C10.821 6.619 10.964 6.722 11.125 6.722C11.286 6.722 11.43 6.618 11.48 6.466L11.796 5.519L12.742 5.204C12.895 5.153 12.999 5.01 12.999 4.848C12.999 4.686 12.895 4.543 12.742 4.492H12.743Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M14.25 8.5C14.6642 8.5 15 8.16421 15 7.75C15 7.33579 14.6642 7 14.25 7C13.8358 7 13.5 7.33579 13.5 7.75C13.5 8.16421 13.8358 8.5 14.25 8.5Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Newspaper2Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path opacity="0.3" d="M4.75 3.25H16.25V13.25C16.25 14.078 15.578 14.75 14.75 14.75H4.75V3.25Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.25 15.25H14.75C15.578 15.25 16.25 14.578 16.25 13.75V2.75H4.75V13.75C4.75 14.578 4.078 15.25 3.25 15.25Z" />
+      <path d="M3.25 15.25C2.422 15.25 1.75 14.578 1.75 13.75V6.75" />
+      <path d="M7.75 7.25H13.25" />
+      <path d="M7.75 10.25H13.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/PageIcon.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+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"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M15.25 14.25V3.75C15.25 2.64543 14.3546 1.75 13.25 1.75L4.75 1.75C3.64543 1.75 2.75 2.64543 2.75 3.75V14.25C2.75 15.3546 3.64543 16.25 4.75 16.25H13.25C14.3546 16.25 15.25 15.3546 15.25 14.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.25 6.25H12.25" />
+      <path d="M5.75 9.25H12.25" />
+      <path d="M5.75 12.25H12.25" />
+      <path d="M15.25 14.25V3.75C15.25 2.64543 14.3546 1.75 13.25 1.75L4.75 1.75C3.64543 1.75 2.75 2.64543 2.75 3.75V14.25C2.75 15.3546 3.64543 16.25 4.75 16.25H13.25C14.3546 16.25 15.25 15.3546 15.25 14.25Z" />
+      <path d="M7.25 4.75H5.75V6.25H7.25V4.75Z" :fill="color" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>