@umbra.ui/icons 0.1.0

package/src/icons/MagnifierIcon.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="M7.75 12.75C10.5114 12.75 12.75 10.5114 12.75 7.75C12.75 4.98858 10.5114 2.75 7.75 2.75C4.98858 2.75 2.75 4.98858 2.75 7.75C2.75 10.5114 4.98858 12.75 7.75 12.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.25 15.25L11.285 11.285" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.75 12.75C10.5114 12.75 12.75 10.5114 12.75 7.75C12.75 4.98858 10.5114 2.75 7.75 2.75C4.98858 2.75 2.75 4.98858 2.75 7.75C2.75 10.5114 4.98858 12.75 7.75 12.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/MapIcon.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="M6.25 2.79144C6.15493 2.78511 6.05895 2.79229 5.965 2.813L2.533 3.576C2.076 3.677 1.75 4.083 1.75 4.552V13.004C1.75 13.644 2.342 14.119 2.967 13.98L5.965 13.314C6.05895 13.2928 6.15493 13.2856 6.25 13.2921V2.79144ZM11.75 15.2086C11.8451 15.2149 11.9411 15.2077 12.035 15.187L15.467 14.424C15.924 14.323 16.25 13.917 16.25 13.448V4.996C16.25 4.356 15.658 3.881 15.033 4.02L12.035 4.686C11.9411 4.70722 11.8451 4.7144 11.75 4.70794V15.2086Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M6.25 2.792V13.292" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.75 4.708V15.208" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.533 3.576L5.965 2.813C6.151 2.772 6.345 2.784 6.524 2.849L11.476 4.65C11.655 4.715 11.849 4.728 12.035 4.686L15.033 4.02C15.658 3.881 16.25 4.356 16.25 4.996V13.448C16.25 13.917 15.924 14.323 15.467 14.424L12.035 15.187C11.849 15.228 11.655 15.216 11.476 15.151L6.524 13.35C6.345 13.285 6.151 13.272 5.965 13.314L2.967 13.98C2.342 14.119 1.75 13.644 1.75 13.004V4.552C1.75 4.083 2.076 3.677 2.533 3.576Z" :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/MenuBarsIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path d="M5.75 9H16.25" />
+      <path d="M1.75 9H2.75" />
+      <path d="M15.25 3.75H16.25" />
+      <path d="M1.75 3.75H12.25" />
+      <path d="M15.25 14.25H16.25" />
+      <path d="M1.75 14.25H12.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MenuIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path d="M2.25 9H15.75" />
+      <path d="M2.25 3.75H15.75" />
+      <path d="M2.25 14.25H15.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MicrophoneIcon.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="M12.25 5C12.25 3.20507 10.7949 1.75 9 1.75C7.20507 1.75 5.75 3.20507 5.75 5V8C5.75 9.79493 7.20507 11.25 9 11.25C10.7949 11.25 12.25 9.79493 12.25 8V5Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.25 5C12.25 3.20507 10.7949 1.75 9 1.75C7.20507 1.75 5.75 3.20507 5.75 5V8C5.75 9.79493 7.20507 11.25 9 11.25C10.7949 11.25 12.25 9.79493 12.25 8V5Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.25 8C15.25 11.452 12.452 14.25 9 14.25C5.548 14.25 2.75 11.452 2.75 8" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 14.25V16.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/MicrophoneSlashIcon.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.25 4.75V5.74997L7.10751 10.8925C6.2855 10.3027 5.75 9.33889 5.75 8.25V4.75C5.75 2.95507 7.20507 1.5 9 1.5C10.7949 1.5 12.25 2.95507 12.25 4.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.25 5C12.25 3.20507 10.7949 1.75 9 1.75C7.20507 1.75 5.75 3.20507 5.75 5V8C5.75 9.79493 7.20507 11.25 9 11.25C10.7949 11.25 12.25 9.79493 12.25 8V5Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.109 12.891C3.672 11.746 2.75 9.98 2.75 8" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.25 8C15.25 11.452 12.452 14.25 9.00002 14.25C8.47302 14.25 7.96202 14.185 7.47302 14.062" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 14.25V16.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2 16L16 2" :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/MinusIcon.vue

@@ -0,0 +1,33 @@
+<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.25 9H14.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/MoneyBillCoinIcon.vue

@@ -0,0 +1,47 @@
+<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="M8.5 8.97201V8.25C8.5 7.01243 9.19172 5.93643 10.2096 5.38751C9.8759 5.14383 9.46463 5 9.01976 5C7.90428 5 7 5.90428 7 7.01976C7 7.95554 7.63639 8.74269 8.5 8.97201Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.75 4.75C3.40685 4.75 4.75 3.40685 4.75 1.75H3.75C2.64543 1.75 1.75 2.64543 1.75 3.75V4.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M1.75 9.25C3.40685 9.25 4.75 10.5931 4.75 12.25H3.75C2.64543 12.25 1.75 11.3546 1.75 10.25V9.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M16.25 4.75C14.5931 4.75 13.25 3.40685 13.25 1.75H14.25C15.3546 1.75 16.25 2.64543 16.25 3.75V4.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.25 10.25H10.75C10.1977 10.25 9.75 10.6977 9.75 11.25V12.25C9.75 12.8023 10.1977 13.25 10.75 13.25H15.25C15.8023 13.25 16.25 12.8023 16.25 12.25V11.25C16.25 10.6977 15.8023 10.25 15.25 10.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M16.25 7.25H11.75C11.1977 7.25 10.75 7.69772 10.75 8.25V9.25C10.75 9.80228 11.1977 10.25 11.75 10.25H16.25C16.8023 10.25 17.25 9.80228 17.25 9.25V8.25C17.25 7.69772 16.8023 7.25 16.25 7.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M16.25 13.25H11.75C11.1977 13.25 10.75 13.6977 10.75 14.25V15.25C10.75 15.8023 11.1977 16.25 11.75 16.25H16.25C16.8023 16.25 17.25 15.8023 17.25 15.25V14.25C17.25 13.6977 16.8023 13.25 16.25 13.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8.033 8.751C7.417 8.41 7 7.754 7 7C7 5.895 7.895 5 9 5C9.345 5 9.67 5.087 9.953 5.241" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.75 1.75C4.75 3.407 3.407 4.75 1.75 4.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.25 1.75C13.25 3.407 14.593 4.75 16.25 4.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.75 12.25C4.75 10.593 3.407 9.25 1.75 9.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.25 12.25H3.75C2.645 12.25 1.75 11.355 1.75 10.25V3.75C1.75 2.645 2.645 1.75 3.75 1.75H14.25C15.355 1.75 16.25 2.645 16.25 3.75V4.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.25 10.25H10.75C10.1977 10.25 9.75 10.6977 9.75 11.25V12.25C9.75 12.8023 10.1977 13.25 10.75 13.25H15.25C15.8023 13.25 16.25 12.8023 16.25 12.25V11.25C16.25 10.6977 15.8023 10.25 15.25 10.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M16.25 7.25H11.75C11.1977 7.25 10.75 7.69772 10.75 8.25V9.25C10.75 9.80228 11.1977 10.25 11.75 10.25H16.25C16.8023 10.25 17.25 9.80228 17.25 9.25V8.25C17.25 7.69772 16.8023 7.25 16.25 7.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M16.25 13.25H11.75C11.1977 13.25 10.75 13.6977 10.75 14.25V15.25C10.75 15.8023 11.1977 16.25 11.75 16.25H16.25C16.8023 16.25 17.25 15.8023 17.25 15.25V14.25C17.25 13.6977 16.8023 13.25 16.25 13.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/MoonIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <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" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MsgBubbleUserIcon.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.25 1.25C11.041 1.25 9.25 3.041 9.25 5.25C9.25 5.978 9.447 6.658 9.787 7.246C10.024 7.691 9.758 8.742 9.25 9.25C9.94 9.287 10.848 8.976 11.254 8.713C11.524 8.869 11.952 9.075 12.512 9.181C12.751 9.226 12.998 9.25 13.25 9.25C15.459 9.25 17.25 7.459 17.25 5.25C17.25 3.041 15.459 1.25 13.25 1.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M13.25 1.25C11.041 1.25 9.25 3.041 9.25 5.25C9.25 5.978 9.447 6.658 9.787 7.246C10.024 7.691 9.758 8.742 9.25 9.25C9.94 9.287 10.848 8.976 11.254 8.713C11.524 8.869 11.952 9.075 12.512 9.181C12.751 9.226 12.998 9.25 13.25 9.25C15.459 9.25 17.25 7.459 17.25 5.25C17.25 3.041 15.459 1.25 13.25 1.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.55099 10.75C5.65556 10.75 6.55099 9.85457 6.55099 8.75C6.55099 7.64543 5.65556 6.75 4.55099 6.75C3.44643 6.75 2.55099 7.64543 2.55099 8.75C2.55099 9.85457 3.44643 10.75 4.55099 10.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M0.75 16C1.275 14.403 2.778 13.25 4.551 13.25C6.324 13.25 7.827 14.403 8.352 16" :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/MsgSmileIcon.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 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 10.319 2.108 11.552 2.723 12.617C3.153 13.423 2.67 15.329 1.75 16.25C3 16.318 4.647 15.753 5.383 15.277C5.872 15.559 6.647 15.933 7.662 16.125C8.095 16.207 8.543 16.25 9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 10.319 2.108 11.552 2.723 12.617C3.153 13.423 2.67 15.329 1.75 16.25C3 16.318 4.647 15.753 5.383 15.277C5.872 15.559 6.647 15.933 7.662 16.125C8.095 16.207 8.543 16.25 9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.992 12C6.762 12.772 7.826 13.25 9 13.25C10.174 13.25 11.231 12.775 12 12.008" :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/MsgWritingIcon.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 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 10.319 2.108 11.552 2.723 12.617C3.153 13.423 2.67 15.329 1.75 16.25C3 16.318 4.647 15.753 5.383 15.277C5.872 15.559 6.647 15.933 7.662 16.125C8.095 16.207 8.543 16.25 9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 1.75C4.996 1.75 1.75 4.996 1.75 9C1.75 10.319 2.108 11.552 2.723 12.617C3.153 13.423 2.67 15.329 1.75 16.25C3 16.318 4.647 15.753 5.383 15.277C5.872 15.559 6.647 15.933 7.662 16.125C8.095 16.207 8.543 16.25 9 16.25C13.004 16.25 16.25 13.004 16.25 9C16.25 4.996 13.004 1.75 9 1.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path opacity="0.75" d="M9 10C8.448 10 8 9.551 8 9C8 8.449 8.448 8 9 8C9.552 8 10 8.449 10 9C10 9.551 9.552 10 9 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M5.5 10C4.948 10 4.5 9.551 4.5 9C4.5 8.449 4.948 8 5.5 8C6.052 8 6.5 8.449 6.5 9C6.5 9.551 6.052 10 5.5 10Z" :fill="color" data-stroke="none" stroke="none" />
+      <path opacity="0.5" d="M12.5 10C11.948 10 11.5 9.551 11.5 9C11.5 8.449 11.948 8 12.5 8C13.052 8 13.5 8.449 13.5 9C13.5 9.551 13.052 10 12.5 10Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MsgsIcon.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="M12.75 7.246C15.235 7.246 17.25 9.261 17.25 11.746C17.25 12.565 17.028 13.33 16.646 13.992C16.379 14.492 16.679 15.675 17.25 16.247C16.474 16.289 15.452 15.938 14.995 15.643C14.692 15.818 14.21 16.05 13.58 16.17C13.311 16.221 13.033 16.248 12.749 16.248C10.263 16.248 8.24902 14.233 8.24902 11.748C8.24902 9.262 10.264 7.248 12.749 7.248L12.75 7.246Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.337 4.767C11.242 2.961 9.263 1.75 6.997 1.75C3.547 1.75 0.75 4.547 0.75 7.998C0.75 9.134 1.058 10.197 1.589 11.115C1.959 11.81 1.544 13.452 0.75 14.245C1.827 14.303 3.247 13.817 3.88 13.406C4.301 13.649 4.97 13.972 5.844 14.137C5.956 14.158 6.076 14.154 6.19 14.169" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 7.246C15.235 7.246 17.25 9.261 17.25 11.746C17.25 12.565 17.028 13.33 16.646 13.992C16.379 14.492 16.679 15.675 17.25 16.247C16.474 16.289 15.452 15.938 14.995 15.643C14.692 15.818 14.21 16.05 13.58 16.17C13.311 16.221 13.033 16.248 12.749 16.248C10.263 16.248 8.24902 14.233 8.24902 11.748C8.24902 9.262 10.264 7.248 12.749 7.248L12.75 7.246Z" :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/MusicIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <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" />
+      <path d="M5.75 7.25V13.75" />
+      <path d="M14.75 5.75V12.25" />
+      <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" />
+      <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" />
+      <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" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MusicNoteSparkleIcon.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 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="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" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.75 6.25V13.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <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" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.49301 5.742L3.54701 5.427L3.23101 4.48C3.12901 4.174 2.62201 4.174 2.52001 4.48L2.20401 5.427L1.25801 5.742C1.10501 5.793 1.00101 5.936 1.00101 6.098C1.00101 6.26 1.10501 6.403 1.25801 6.454L2.20401 6.769L2.52001 7.716C2.57101 7.869 2.71401 7.972 2.87501 7.972C3.03601 7.972 3.18001 7.868 3.23001 7.716L3.54601 6.769L4.49201 6.454C4.64501 6.403 4.74901 6.26 4.74901 6.098C4.74901 5.936 4.64601 5.793 4.49301 5.742Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M16.658 10.99L15.395 10.569L14.974 9.306C14.837 8.898 14.162 8.898 14.025 9.306L13.604 10.569L12.341 10.99C12.137 11.058 11.999 11.249 11.999 11.464C11.999 11.679 12.137 11.87 12.341 11.938L13.604 12.359L14.025 13.622C14.093 13.826 14.285 13.964 14.5 13.964C14.715 13.964 14.906 13.826 14.975 13.622L15.396 12.359L16.659 11.938C16.863 11.87 17.001 11.679 17.001 11.464C17.001 11.249 16.862 11.058 16.658 10.99Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M5.25 3C5.66421 3 6 2.66421 6 2.25C6 1.83579 5.66421 1.5 5.25 1.5C4.83579 1.5 4.5 1.83579 4.5 2.25C4.5 2.66421 4.83579 3 5.25 3Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/MusicPlaylist2Icon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path d="M9.25 15.75C10.6307 15.75 11.75 14.6307 11.75 13.25C11.75 11.8693 10.6307 10.75 9.25 10.75C7.86929 10.75 6.75 11.8693 6.75 13.25C6.75 14.6307 7.86929 15.75 9.25 15.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M11.75 13.25V2.25C11.75 2.25 13.25 4.812 15.75 6.25" />
+      <path d="M9.25 15.75C10.6307 15.75 11.75 14.6307 11.75 13.25C11.75 11.8693 10.6307 10.75 9.25 10.75C7.86929 10.75 6.75 11.8693 6.75 13.25C6.75 14.6307 7.86929 15.75 9.25 15.75Z" />
+      <path d="M8.25 3.75H2.25" />
+      <path d="M6.5 7.25H2.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>