@umbra.ui/icons 0.2.0 → 0.4.0

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/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/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/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/Microphone3Icon.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="M12.25 4C12.25 2.20507 10.7949 0.75 9 0.75C7.20507 0.75 5.75 2.20507 5.75 4V7.5C5.75 9.29493 7.20507 10.75 9 10.75C10.7949 10.75 12.25 9.29493 12.25 7.5V4Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9.75 5.75H12.25" />
+      <path d="M15.25 7.5C15.25 10.946 12.446 13.75 9 13.75C5.554 13.75 2.75 10.946 2.75 7.5" />
+      <path d="M12.25 4C12.25 2.20507 10.7949 0.75 9 0.75C7.20507 0.75 5.75 2.20507 5.75 4V7.5C5.75 9.29493 7.20507 10.75 9 10.75C10.7949 10.75 12.25 9.29493 12.25 7.5V4Z" />
+      <path d="M9 13.75V17.25" />
+      <path d="M5.75 17.25H12.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MusicAlbumIcon.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 fill-rule="evenodd" clip-rule="evenodd" d="M14.552 4.75H3.44802C2.82402 4.75 2.35202 5.315 2.46402 5.929L4.10102 14.929C4.18802 15.404 4.60202 15.75 5.08502 15.75H12.916C13.399 15.75 13.814 15.404 13.9 14.929L15.536 5.929C15.647 5.315 15.176 4.75 14.552 4.75ZM11.25 10C11.25 11.2426 10.2426 12.25 9 12.25C7.75736 12.25 6.75 11.2426 6.75 10C6.75 8.75736 7.75736 7.75 9 7.75C10.2426 7.75 11.25 8.75736 11.25 10Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 12.25C10.2426 12.25 11.25 11.2426 11.25 10C11.25 8.75736 10.2426 7.75 9 7.75C7.75736 7.75 6.75 8.75736 6.75 10C6.75 11.2426 7.75736 12.25 9 12.25Z" />
+      <path d="M13.75 1.75H4.25" />
+      <path d="M3.44802 4.75H14.552C15.176 4.75 15.647 5.315 15.536 5.929L13.9 14.929C13.814 15.404 13.399 15.75 12.916 15.75H5.08502C4.60202 15.75 4.18802 15.404 4.10102 14.929L2.46402 5.929C2.35202 5.315 2.82402 4.75 3.44802 4.75Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MusicIcon.vue

@@ -18,8 +18,7 @@ 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">
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
       <path d="M6.586 3.361L13.586 2.194C14.196 2.092 14.75 2.562 14.75 3.18V5.75L5.75 7.25V4.347C5.75 3.858 6.103 3.441 6.586 3.361Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
       <path d="M3.75 15.75C4.85457 15.75 5.75 14.8546 5.75 13.75C5.75 12.6454 4.85457 11.75 3.75 11.75C2.64543 11.75 1.75 12.6454 1.75 13.75C1.75 14.8546 2.64543 15.75 3.75 15.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
       <path d="M12.75 14.25C13.8546 14.25 14.75 13.3546 14.75 12.25C14.75 11.1454 13.8546 10.25 12.75 10.25C11.6454 10.25 10.75 11.1454 10.75 12.25C10.75 13.3546 11.6454 14.25 12.75 14.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />

package/src/icons/MusicNoteIcon.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="M6 16.25C7.51878 16.25 8.75 15.0188 8.75 13.5C8.75 11.9812 7.51878 10.75 6 10.75C4.48122 10.75 3.25 11.9812 3.25 13.5C3.25 15.0188 4.48122 16.25 6 16.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9.615 2.38199L13.115 1.90499C13.715 1.82299 14.25 2.28999 14.25 2.89599V4.62699C14.25 5.12699 13.881 5.54999 13.385 5.61799L8.75 6.24999V3.37299C8.75 2.87299 9.119 2.44999 9.615 2.38199Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8.75 6.25V13.5" />
+      <path d="M6 16.25C7.51878 16.25 8.75 15.0188 8.75 13.5C8.75 11.9812 7.51878 10.75 6 10.75C4.48122 10.75 3.25 11.9812 3.25 13.5C3.25 15.0188 4.48122 16.25 6 16.25Z" />
+      <path d="M9.615 2.38199L13.115 1.90499C13.715 1.82299 14.25 2.28999 14.25 2.89599V4.62699C14.25 5.12699 13.881 5.54999 13.385 5.61799L8.75 6.24999V3.37299C8.75 2.87299 9.119 2.44999 9.615 2.38199Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MusicPlusIcon.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="m13.586,2.1938l-5.2051.8679c.0708.2183.1191.4465.1191.6882,0,1.2407-1.0098,2.25-2.25,2.25h-.25v.25c0,.3606-.0931.6968-.2446.999l8.9946-1.499v-2.5701c0-.6179-.554-1.0879-1.164-.9861Z" :fill="color" opacity=".3" stroke-width="0" data-color="color-2" />
+      <path d="m8.6399,3.0186l4.9461-.8246c.61-.102,1.164.368,1.164.986v2.57l-9,1.5" />
+      <line x1="5.75" y1="7.25" x2="5.75" y2="13.75" />
+      <line x1="14.75" y1="5.75" x2="14.75" y2="12.25" />
+      <circle cx="3.75" cy="13.75" r="2" :fill="color" opacity=".3" stroke-width="0" data-color="color-2" />
+      <circle cx="12.75" cy="12.25" r="2" :fill="color" opacity=".3" stroke-width="0" data-color="color-2" />
+      <circle cx="3.75" cy="13.75" r="2" />
+      <circle cx="12.75" cy="12.25" r="2" />
+      <line x1="3.75" y1="1.25" x2="3.75" y2="6.25" />
+      <line x1="6.25" y1="3.75" x2="1.25" y2="3.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/NightShiftIcon.vue

@@ -0,0 +1,42 @@
+<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 fill-rule="evenodd" clip-rule="evenodd" d="M7.73475 4.94153C7.42793 5.86856 7.2402 7.81708 8.66136 9.23824C9.88562 10.4625 11.7911 10.529 13.0325 10.3459C12.4695 12.0334 10.8768 13.25 9 13.25C6.65279 13.25 4.75 11.3472 4.75 9.00001C4.75 7.09343 6.00545 5.48007 7.73475 4.94153Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 0.75V2.25" />
+      <path d="M14.834 3.16599L13.773 4.22699" />
+      <path d="M17.25 9H15.75" />
+      <path d="M14.834 14.834L13.773 13.773" />
+      <path d="M9 17.25V15.75" />
+      <path d="M3.16599 14.834L4.22699 13.773" />
+      <path d="M0.75 9H2.25" />
+      <path d="M3.16599 3.16599L4.22699 4.22699" />
+      <path d="M9 13.25C11.3472 13.25 13.25 11.3472 13.25 9C13.25 6.65279 11.3472 4.75 9 4.75C6.65279 4.75 4.75 6.65279 4.75 9C4.75 11.3472 6.65279 13.25 9 13.25Z" />
+      <path d="M7.718 4.96799C7.589 5.37499 7.5 5.79999 7.5 6.24999C7.5 8.59699 9.403 10.5 11.75 10.5C12.2 10.5 12.625 10.411 13.032 10.282" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/NotebookIcon.vue

@@ -0,0 +1,38 @@
+<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 fill-rule="evenodd" clip-rule="evenodd" d="M7.25 1.75H12.75C13.8546 1.75 14.75 2.64543 14.75 3.75V14.25C14.75 15.3546 13.8546 16.25 12.75 16.25H7.25V1.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M17.25 4.75V7.25" />
+      <path d="M7.25 1.75V16.25" />
+      <path d="M12.75 1.75H5.25C4.14543 1.75 3.25 2.64543 3.25 3.75V14.25C3.25 15.3546 4.14543 16.25 5.25 16.25H12.75C13.8546 16.25 14.75 15.3546 14.75 14.25V3.75C14.75 2.64543 13.8546 1.75 12.75 1.75Z" />
+      <path d="M1.75 9H4.75" />
+      <path d="M1.75 5.75H4.75" />
+      <path d="M1.75 12.25H4.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/OpeningQuotationMarkIcon.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="M1.75 9.25314H6.25C6.80228 9.25314 7.25 9.70086 7.25 10.2531V13.25C7.25 13.8023 6.80228 14.25 6.25 14.25H2.75C2.19772 14.25 1.75 13.8023 1.75 13.25V9.25314Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.75 9.25314H15.25C15.8023 9.25314 16.25 9.70086 16.25 10.2531V13.25C16.25 13.8023 15.8023 14.25 15.25 14.25H11.75C11.1977 14.25 10.75 13.8023 10.75 13.25V9.25314Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.75 9.25H6.25C6.802 9.25 7.25 9.698 7.25 10.25V13.25C7.25 13.802 6.802 14.25 6.25 14.25H2.75C2.198 14.25 1.75 13.802 1.75 13.25V9.25ZM1.75 9.25C1.75 5.5 3 3.625 5.25 2.75" />
+      <path d="M10.75 9.25H15.25C15.802 9.25 16.25 9.698 16.25 10.25V13.25C16.25 13.802 15.802 14.25 15.25 14.25H11.75C11.198 14.25 10.75 13.802 10.75 13.25V9.25ZM10.75 9.25C10.75 5.5 12 3.625 14.25 2.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/OrderedListIcon.vue

@@ -18,12 +18,11 @@ withDefaults(defineProps<Props>(), {
     viewBox="0 0 18 18"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title />
-    <g :fill="color">
-      <path d="M2.50002 11.661C2.75902 10.74 3.65202 10.236 4.61602 10.25C5.58102 10.264 6.48802 10.696 6.54502 11.661C6.60202 12.626 5.58002 13.273 4.52202 13.705C3.46402 14.137 2.58602 14.54 2.49902 15.749H6.54802" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M9.5 5.25H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M9.5 12.75H16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M4.75002 7.5V2C4.75002 2 4.12002 3.108 2.78302 3.364" :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="M2.50002 11.661C2.75902 10.74 3.65202 10.236 4.61602 10.25C5.58102 10.264 6.48802 10.696 6.54502 11.661C6.60202 12.626 5.58002 13.273 4.52202 13.705C3.46402 14.137 2.58602 14.54 2.49902 15.749H6.54802" />
+      <path d="M9.5 5.25H16.25" />
+      <path d="M9.5 12.75H16.25" />
+      <path d="M4.75002 7.5V2C4.75002 2 4.12002 3.108 2.78302 3.364" />
     </g>
   </svg>
 </template>

package/src/icons/ParagraphCheckIcon.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 13.75H6.75" />
+      <path d="M2.75 10.25H6.75" />
+      <path d="M2.75 6.75H15.25" />
+      <path d="M2.75 3.25H15.25" />
+      <path d="M10 12.912L11.609 14.521L15.006 10.104" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>