@umbra.ui/icons 0.2.0 → 0.5.0

package/src/icons/Headphones2Icon.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="M2.75 9.75V14.25C2.75 14.802 3.198 15.25 3.75 15.25H5.25C5.802 15.25 6.25 14.802 6.25 14.25V10.75C6.25 10.198 5.802 9.75 5.25 9.75H3.703H2.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.25 9.75V14.25C15.25 14.802 14.802 15.25 14.25 15.25H12.75C12.198 15.25 11.75 14.802 11.75 14.25V10.75C11.75 10.198 12.198 9.75 12.75 9.75H14.297H15.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.25 9.75V9C15.25 5.548 12.452 2.75 9 2.75C5.548 2.75 2.75 5.548 2.75 9V9.75" />
+      <path d="M2.75 9.75V14.25C2.75 14.802 3.198 15.25 3.75 15.25H5.25C5.802 15.25 6.25 14.802 6.25 14.25V10.75C6.25 10.198 5.802 9.75 5.25 9.75H3.703H2.75Z" />
+      <path d="M15.25 9.75V14.25C15.25 14.802 14.802 15.25 14.25 15.25H12.75C12.198 15.25 11.75 14.802 11.75 14.25V10.75C11.75 10.198 12.198 9.75 12.75 9.75H14.297H15.25Z" />
+    </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/Heart2SlashIcon.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="m14.5693,3.4307c-1.9718-1.3154-4.572-.5588-5.5703,1.4973-.171-.353-.396-.678-.666-.962-1.451-1.528-3.867-1.591-5.395-.139-1.528,1.451-1.591,3.867-.139,5.395l2.9322,3.0467L14.5693,3.4307Zm-7.2602,10.4775l.9699,1.0078c.393.409,1.048.409,1.441,0l5.48-5.694c.882-.928,1.279-2.283.916-3.666-.0307-.1167-.3197.0205-.3623-.0925L7.3091,13.9082Z" :fill="color" fill-rule="evenodd" opacity=".3" stroke-width="0" data-color="color-2" />
+      <path d="m5.731,12.269l-2.932-3.047c-1.452-1.528-1.389-3.944.139-5.395,1.528-1.452,3.944-1.389,5.395.139.27.284.495.609.666.962.998-2.056,3.598-2.813,5.57-1.497" />
+      <path d="m7.8115,14.4307l.4675.4854c.393.4089,1.048.4089,1.441,0l5.48-5.6941c.7794-.8198,1.1728-1.9741,1.0051-3.1848" />
+      <line x1="2.75" y1="15.25" x2="16" y2="2" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/HourglassStartIcon.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="M7.23035 8.99579C4.93868 7.86973 4.76093 4.66933 4.76093 2.23941C7.59255 2.23282 13.2558 2.2236 13.2558 2.23941C13.2558 5.91393 12.6236 7.9685 10.7666 8.97603C12.4853 10.1021 13.2558 11.6233 13.2558 15.7324H4.76094C4.76094 13.421 4.8202 10.3787 7.23035 8.99579Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M4.75 15.75C4.75 11.89 5.307 10.294 7.21 9C5.307 7.706 4.75 6.11 4.75 2.25" />
+      <path d="M13.25 15.75C13.25 11.89 12.693 10.294 10.79 9C12.693 7.706 13.25 6.11 13.25 2.25" />
+      <path d="M3.75 2.25H14.25" />
+      <path d="M3.75 15.75H14.25" />
+      <path d="M10.6016 4.7905C10.46 4.6074 10.2403 4.5 10.0088 4.5H7.99119C7.75979 4.5 7.53998 4.6074 7.39838 4.7905C7.25678 4.9736 7.20696 5.2124 7.26456 5.437C7.53996 6.5039 8.05849 6.8564 8.47459 7.1391C8.61729 7.2451 8.81068 7.3054 8.99998 7.3124C9.18928 7.3053 9.38267 7.245 9.52537 7.1391C9.94137 6.8564 10.46 6.5038 10.7354 5.437C10.793 5.2124 10.7432 4.9736 10.6016 4.7905Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/ImageIcon.vue

@@ -18,11 +18,10 @@ withDefaults(defineProps<Props>(), {
     viewBox="0 0 18 18"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title />
-    <g :fill="color">
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75 2.75H13.25C14.3546 2.75 15.25 3.64543 15.25 4.75V11.4513L12.5867 8.94063C11.7943 8.19366 10.5499 8.21792 9.78725 8.99521L3.85636 15.0397C3.20039 14.7116 2.75 14.0334 2.75 13.25V4.75C2.75 3.64543 3.64543 2.75 4.75 2.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M3.76199 14.989L9.83599 8.914C10.617 8.133 11.883 8.133 12.664 8.914L15.25 11.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="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="M3.76199 14.989L9.83599 8.914C10.617 8.133 11.883 8.133 12.664 8.914L15.25 11.5" />
+      <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" />
       <path d="M6.25 8.5C6.94036 8.5 7.5 7.94036 7.5 7.25C7.5 6.55964 6.94036 6 6.25 6C5.55964 6 5 6.55964 5 7.25C5 7.94036 5.55964 8.5 6.25 8.5Z" :fill="color" data-stroke="none" stroke="none" />
     </g>
   </svg>

package/src/icons/ImageMountainIcon.vue

@@ -18,11 +18,10 @@ withDefaults(defineProps<Props>(), {
     viewBox="0 0 18 18"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title />
-    <g :fill="color">
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
       <path d="M16.329 12.658L12.056 6.846C11.656 6.303 10.844 6.303 10.445 6.846L7.126 11.36L5.682 9.396C5.282 8.852 4.47 8.852 4.071 9.396L1.673 12.658C1.187 13.318 1.659 14.25 2.479 14.25H15.523C16.343 14.25 16.814 13.318 16.329 12.658Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M16.329 12.658L12.056 6.846C11.656 6.303 10.844 6.303 10.445 6.846L7.126 11.36L5.682 9.396C5.282 8.852 4.47 8.852 4.071 9.396L1.673 12.658C1.187 13.318 1.659 14.25 2.479 14.25H15.523C16.343 14.25 16.814 13.318 16.329 12.658Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M5.5 5.75C6.4665 5.75 7.25 4.9665 7.25 4C7.25 3.0335 6.4665 2.25 5.5 2.25C4.5335 2.25 3.75 3.0335 3.75 4C3.75 4.9665 4.5335 5.75 5.5 5.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M16.329 12.658L12.056 6.846C11.656 6.303 10.844 6.303 10.445 6.846L7.126 11.36L5.682 9.396C5.282 8.852 4.47 8.852 4.071 9.396L1.673 12.658C1.187 13.318 1.659 14.25 2.479 14.25H15.523C16.343 14.25 16.814 13.318 16.329 12.658Z" />
+      <path d="M5.5 5.75C6.4665 5.75 7.25 4.9665 7.25 4C7.25 3.0335 6.4665 2.25 5.5 2.25C4.5335 2.25 3.75 3.0335 3.75 4C3.75 4.9665 4.5335 5.75 5.5 5.75Z" />
     </g>
   </svg>
 </template>

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/KeyNodesIcon.vue

@@ -18,21 +18,20 @@ withDefaults(defineProps<Props>(), {
     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 d="M9 16.25C9.82843 16.25 10.5 15.5784 10.5 14.75C10.5 13.9216 9.82843 13.25 9 13.25C8.17157 13.25 7.5 13.9216 7.5 14.75C7.5 15.5784 8.17157 16.25 9 16.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M3.5 15.75C4.32843 15.75 5 15.0784 5 14.25C5 13.4216 4.32843 12.75 3.5 12.75C2.67157 12.75 2 13.4216 2 14.25C2 15.0784 2.67157 15.75 3.5 15.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M14.5 15.75C15.3284 15.75 16 15.0784 16 14.25C16 13.4216 15.3284 12.75 14.5 12.75C13.6716 12.75 13 13.4216 13 14.25C13 15.0784 13.6716 15.75 14.5 15.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M5.25 6.75C6.63071 6.75 7.75 5.63071 7.75 4.25C7.75 2.86929 6.63071 1.75 5.25 1.75C3.86929 1.75 2.75 2.86929 2.75 4.25C2.75 5.63071 3.86929 6.75 5.25 6.75Z" />
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M5.25 6.75C6.6307 6.75 7.75 5.631 7.75 4.25C7.75 2.869 6.6307 1.75 5.25 1.75C3.8693 1.75 2.75 2.869 2.75 4.25C2.75 5.631 3.8693 6.75 5.25 6.75Z" />
       <path d="M7.75 4.25H15.25" />
       <path d="M13.75 4.25V6.5" />
       <path d="M11.25 4.25V6.5" />
-      <path d="M9 16.25C9.82843 16.25 10.5 15.5784 10.5 14.75C10.5 13.9216 9.82843 13.25 9 13.25C8.17157 13.25 7.5 13.9216 7.5 14.75C7.5 15.5784 8.17157 16.25 9 16.25Z" />
-      <path d="M3.5 15.75C4.32843 15.75 5 15.0784 5 14.25C5 13.4216 4.32843 12.75 3.5 12.75C2.67157 12.75 2 13.4216 2 14.25C2 15.0784 2.67157 15.75 3.5 15.75Z" />
-      <path d="M9 8.75V13.25" />
-      <path d="M4.56 13.19L5.957 11.793C6.145 11.605 6.25 11.351 6.25 11.086V10" />
-      <path d="M14.5 15.75C15.3284 15.75 16 15.0784 16 14.25C16 13.4216 15.3284 12.75 14.5 12.75C13.6716 12.75 13 13.4216 13 14.25C13 15.0784 13.6716 15.75 14.5 15.75Z" />
-      <path d="M13.44 13.19L12.043 11.793C11.855 11.605 11.75 11.351 11.75 11.086V10" />
+      <path opacity="0.3" d="M9 16.25C9.9665 16.25 10.75 15.466 10.75 14.5C10.75 13.534 9.9665 12.75 9 12.75C8.0335 12.75 7.25 13.534 7.25 14.5C7.25 15.466 8.0335 16.25 9 16.25Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path opacity="0.3" d="M3.5 14.25C4.4665 14.25 5.25 13.466 5.25 12.5C5.25 11.534 4.4665 10.75 3.5 10.75C2.5335 10.75 1.75 11.534 1.75 12.5C1.75 13.466 2.5335 14.25 3.5 14.25Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path opacity="0.3" d="M14.5 14.25C13.5335 14.25 12.75 13.466 12.75 12.5C12.75 11.534 13.5335 10.75 14.5 10.75C15.4665 10.75 16.25 11.534 16.25 12.5C16.25 13.466 15.4665 14.25 14.5 14.25Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 16.25C9.9665 16.25 10.75 15.466 10.75 14.5C10.75 13.534 9.9665 12.75 9 12.75C8.0335 12.75 7.25 13.534 7.25 14.5C7.25 15.466 8.0335 16.25 9 16.25Z" />
+      <path d="M3.5 14.25C4.4665 14.25 5.25 13.466 5.25 12.5C5.25 11.534 4.4665 10.75 3.5 10.75C2.5335 10.75 1.75 11.534 1.75 12.5C1.75 13.466 2.5335 14.25 3.5 14.25Z" />
+      <path d="M9 8.75V12.75" />
+      <path d="M4.73706 11.263L5.95706 10.043C6.14506 9.855 6.25006 9.601 6.25006 9.336V8.75" />
+      <path d="M14.5 14.25C13.5335 14.25 12.75 13.466 12.75 12.5C12.75 11.534 13.5335 10.75 14.5 10.75C15.4665 10.75 16.25 11.534 16.25 12.5C16.25 13.466 15.4665 14.25 14.5 14.25Z" />
+      <path d="M13.263 11.263L12.043 10.043C11.855 9.855 11.75 9.601 11.75 9.336V8.75" />
     </g>
   </svg>
 </template>

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/LinkIcon.vue

@@ -18,11 +18,10 @@ withDefaults(defineProps<Props>(), {
     viewBox="0 0 18 18"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title />
-    <g :fill="color">
-      <rect x="10.029" y="5.00841" width="10.1272" height="7.07332" rx="3.53666" transform="rotate(45 10.029 5.00841)" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M8.5 6.827C8.148 6.995 7.818 7.225 7.527 7.517L7.517 7.527C6.136 8.908 6.136 11.146 7.517 12.527L9.692 14.702C11.073 16.083 13.311 16.083 14.692 14.702L14.702 14.692C16.083 13.311 16.083 11.073 14.702 9.692L13.771 8.761" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M9.5 11.173C9.852 11.005 10.182 10.775 10.473 10.483L10.483 10.473C11.864 9.092 11.864 6.854 10.483 5.473L8.308 3.298C6.927 1.917 4.689 1.917 3.308 3.298L3.298 3.308C1.917 4.689 1.917 6.927 3.298 8.308L4.229 9.239" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M14.6892 9.66862L12.5298 7.5092C11.1486 6.12805 8.90935 6.12805 7.5282 7.5092C6.14704 8.89036 6.14704 11.1296 7.5282 12.5108L9.68761 14.6702C11.0688 16.0514 13.3081 16.0514 14.6892 14.6702C16.0704 13.2891 16.0704 11.0498 14.6892 9.66862Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8.36909 6.8934C8.06649 7.0539 7.78239 7.2617 7.52799 7.517L7.51799 7.527C6.13699 8.908 6.13699 11.146 7.51799 12.527L9.69299 14.702C11.074 16.083 13.312 16.083 14.693 14.702L14.703 14.692C16.084 13.311 16.084 11.073 14.703 9.692L13.9406 8.9296" />
+      <path d="M9.63288 11.1066C9.93548 10.9461 10.2196 10.7383 10.474 10.483L10.484 10.473C11.865 9.09199 11.865 6.85399 10.484 5.47299L8.30899 3.29799C6.92799 1.91699 4.68999 1.91699 3.30899 3.29799L3.29899 3.30799C1.91799 4.68899 1.91799 6.92699 3.29899 8.30799L4.06139 9.07039" />
     </g>
   </svg>
 </template>

package/src/icons/MediaNextIcon.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="M4.05 3.677L12.304 8.247C12.899 8.577 12.899 9.424 12.304 9.753L4.05 14.323C3.468 14.645 2.75 14.229 2.75 13.57V4.43C2.75 3.77 3.468 3.355 4.05 3.677Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M4.05 3.677L12.304 8.247C12.899 8.577 12.899 9.424 12.304 9.753L4.05 14.323C3.468 14.645 2.75 14.229 2.75 13.57V4.43C2.75 3.77 3.468 3.355 4.05 3.677Z" />
+      <path d="M15.25 15.25V2.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MediaPauseIcon.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.25 2.75H3.75C3.19772 2.75 2.75 3.19772 2.75 3.75V14.25C2.75 14.8023 3.19772 15.25 3.75 15.25H5.25C5.80228 15.25 6.25 14.8023 6.25 14.25V3.75C6.25 3.19772 5.80228 2.75 5.25 2.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.25 2.75H12.75C12.1977 2.75 11.75 3.19772 11.75 3.75V14.25C11.75 14.8023 12.1977 15.25 12.75 15.25H14.25C14.8023 15.25 15.25 14.8023 15.25 14.25V3.75C15.25 3.19772 14.8023 2.75 14.25 2.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.25 2.75H3.75C3.19772 2.75 2.75 3.19772 2.75 3.75V14.25C2.75 14.8023 3.19772 15.25 3.75 15.25H5.25C5.80228 15.25 6.25 14.8023 6.25 14.25V3.75C6.25 3.19772 5.80228 2.75 5.25 2.75Z" />
+      <path d="M14.25 2.75H12.75C12.1977 2.75 11.75 3.19772 11.75 3.75V14.25C11.75 14.8023 12.1977 15.25 12.75 15.25H14.25C14.8023 15.25 15.25 14.8023 15.25 14.25V3.75C15.25 3.19772 14.8023 2.75 14.25 2.75Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MediaPlayIcon.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="M5.245 2.878L14.737 8.134C15.422 8.513 15.422 9.487 14.737 9.866L5.245 15.122C4.576 15.493 3.75 15.014 3.75 14.256V3.744C3.75 2.986 4.575 2.507 5.245 2.878Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.245 2.878L14.737 8.134C15.422 8.513 15.422 9.487 14.737 9.866L5.245 15.122C4.576 15.493 3.75 15.014 3.75 14.256V3.744C3.75 2.986 4.575 2.507 5.245 2.878Z" />
+    </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/MediaPreviousIcon.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="M13.95 14.323L5.69698 9.753C5.10198 9.423 5.10198 8.576 5.69698 8.247L13.95 3.677C14.532 3.355 15.25 3.771 15.25 4.43V13.57C15.25 14.23 14.532 14.645 13.95 14.323Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M13.95 14.323L5.69698 9.753C5.10198 9.423 5.10198 8.576 5.69698 8.247L13.95 3.677C14.532 3.355 15.25 3.771 15.25 4.43V13.57C15.25 14.23 14.532 14.645 13.95 14.323Z" />
+      <path d="M2.75 2.75V15.25" />
+    </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>