@umbra.ui/icons 0.2.0 → 0.4.0

package/src/icons/CryptographyIcon.vue

@@ -18,18 +18,14 @@ withDefaults(defineProps<Props>(), {
     viewBox="0 0 18 18"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <title />
-    <g :fill="color">
-      <path d="M7.25 7.75C8.07843 7.75 8.75 7.07843 8.75 6.25C8.75 5.42157 8.07843 4.75 7.25 4.75C6.42157 4.75 5.75 5.42157 5.75 6.25C5.75 7.07843 6.42157 7.75 7.25 7.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M10.75 13.25C11.5784 13.25 12.25 12.5784 12.25 11.75C12.25 10.9216 11.5784 10.25 10.75 10.25C9.92157 10.25 9.25 10.9216 9.25 11.75C9.25 12.5784 9.92157 13.25 10.75 13.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
-      <path d="M7.25 7.75C8.07843 7.75 8.75 7.07843 8.75 6.25C8.75 5.42157 8.07843 4.75 7.25 4.75C6.42157 4.75 5.75 5.42157 5.75 6.25C5.75 7.07843 6.42157 7.75 7.25 7.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M16.25 6.5V11.881C16.25 12.146 16.145 12.401 15.957 12.588L12.588 15.957C12.4 16.145 12.146 16.25 11.881 16.25H5.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M6.75 10.25V12.586C6.75 12.851 6.855 13.106 7.043 13.293L7.75 14" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M3.25 14.25L4.042 13.225C4.177 13.05 4.25 12.835 4.25 12.614V9.437C4.25 9.158 4.366 8.892 4.571 8.703L6.137 7.253" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M10.75 13.25C11.5784 13.25 12.25 12.5784 12.25 11.75C12.25 10.9216 11.5784 10.25 10.75 10.25C9.92157 10.25 9.25 10.9216 9.25 11.75C9.25 12.5784 9.92157 13.25 10.75 13.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M11.25 7.75V5.414C11.25 5.149 11.145 4.894 10.957 4.707L10.25 4" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M14.75 3.75L13.958 4.775C13.823 4.95 13.75 5.165 13.75 5.386V8.563C13.75 8.842 13.634 9.108 13.429 9.297L11.863 10.747" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
-      <path d="M12.25 1.75H6.119C5.854 1.75 5.599 1.855 5.412 2.043L2.043 5.412C1.855 5.6 1.75 5.854 1.75 6.119V11.5" :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 opacity="0.3" d="M15.1635 5.61839L12.3815 2.8364C12.0065 2.4614 11.4975 2.2505 10.9675 2.2505H7.03259C6.50259 2.2505 5.99359 2.4614 5.61859 2.8364L2.83661 5.61839C2.46161 5.99339 2.25061 6.5024 2.25061 7.0325V10.9676C2.25061 11.4976 2.46161 12.0064 2.83661 12.3814L5.61859 15.1636C5.99359 15.5386 6.50259 15.7495 7.03259 15.7495H10.9675C11.4975 15.7495 12.0065 15.5386 12.3815 15.1636L15.1635 12.3814C15.5385 12.0064 15.7495 11.4976 15.7495 10.9676V7.0325C15.7495 6.5025 15.5385 5.99339 15.1635 5.61839ZM6.75 6.25C6.75 5.4219 7.4216 4.75 8.25 4.75C9.0784 4.75 9.75 5.4219 9.75 6.25C9.75 7.0781 9.0784 7.75 8.25 7.75C7.4216 7.75 6.75 7.0781 6.75 6.25ZM9.75 13.25C8.9216 13.25 8.25 12.5781 8.25 11.75C8.25 10.9219 8.9216 10.25 9.75 10.25C10.5784 10.25 11.25 10.9219 11.25 11.75C11.25 12.5781 10.5784 13.25 9.75 13.25Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8.25 7.75C9.0784 7.75 9.75 7.078 9.75 6.25C9.75 5.422 9.0784 4.75 8.25 4.75C7.4216 4.75 6.75 5.422 6.75 6.25C6.75 7.078 7.4216 7.75 8.25 7.75Z" />
+      <path d="M3.75 14.25L5.04199 12.725C5.17699 12.55 5.25 12.335 5.25 12.114V9.437C5.25 9.158 5.36601 8.892 5.57101 8.703L7.13589 7.2541" />
+      <path d="M6.2041 15.75H11.3818C11.647 15.75 11.9014 15.6446 12.0889 15.4571L15.4572 12.0888C15.6447 11.9013 15.7501 11.6469 15.7501 11.3817V6.20399" />
+      <path d="M11.7959 2.25H6.61816C6.35296 2.25 6.09857 2.35539 5.91107 2.54289L2.54276 5.91119C2.35526 6.09869 2.24988 6.3531 2.24988 6.6183V11.796" />
+      <path d="M9.75 10.25C8.9216 10.25 8.25 10.922 8.25 11.75C8.25 12.578 8.9216 13.25 9.75 13.25C10.5784 13.25 11.25 12.578 11.25 11.75C11.25 10.922 10.5784 10.25 9.75 10.25Z" />
+      <path d="M14.25 3.75L12.958 5.27499C12.823 5.44999 12.75 5.665 12.75 5.886V8.563C12.75 8.842 12.634 9.108 12.429 9.297L10.8641 10.7459" />
     </g>
   </svg>
 </template>

package/src/icons/Cubes2Icon.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="M12.75 10.637V13.863C12.75 14.252 12.525 14.605 12.173 14.769L9.423 16.052C9.155 16.177 8.845 16.177 8.577 16.052L5.827 14.769C5.475 14.605 5.25 14.251 5.25 13.863V10.637C5.25 10.248 5.475 9.895 5.827 9.731L8.577 8.448C8.845 8.323 9.155 8.323 9.423 8.448L12.173 9.731C12.525 9.895 12.75 10.249 12.75 10.637Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5.25 9.896V5.5" />
+      <path d="M8.83 3.82999L5.25 5.49999L1.67 3.82899" />
+      <path d="M9 4.387V7.613C9 8.002 8.775 8.355 8.423 8.519L5.673 9.802C5.405 9.927 5.095 9.927 4.827 9.802L2.077 8.519C1.725 8.355 1.5 8.001 1.5 7.613V4.387C1.5 3.998 1.725 3.645 2.077 3.481L4.827 2.198C5.095 2.073 5.405 2.073 5.673 2.198L8.423 3.481C8.775 3.645 9 3.999 9 4.387Z" />
+      <path d="M12.75 9.896V5.5" />
+      <path d="M9.17 3.82999L12.75 5.49999L16.33 3.82899" />
+      <path d="M9 4.387V7.613C9 8.002 9.225 8.355 9.577 8.519L12.327 9.802C12.595 9.927 12.905 9.927 13.173 9.802L15.923 8.519C16.275 8.355 16.5 8.001 16.5 7.613V4.387C16.5 3.998 16.275 3.645 15.923 3.481L13.173 2.198C12.905 2.073 12.595 2.073 12.327 2.198L9.577 3.481C9.225 3.645 9 3.999 9 4.387Z" />
+      <path d="M9 16.146V11.75" />
+      <path d="M12.58 10.08L9 11.75L5.42 10.079" />
+      <path d="M12.75 10.637V13.863C12.75 14.252 12.525 14.605 12.173 14.769L9.423 16.052C9.155 16.177 8.845 16.177 8.577 16.052L5.827 14.769C5.475 14.605 5.25 14.251 5.25 13.863V10.637C5.25 10.248 5.475 9.895 5.827 9.731L8.577 8.448C8.845 8.323 9.155 8.323 9.423 8.448L12.173 9.731C12.525 9.895 12.75 10.249 12.75 10.637Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/DarkModeIcon.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="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 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" />
+      <path d="M9 4V14C11.761 14 14 11.761 14 9C14 6.239 11.761 4 9 4Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/DecentralizeIcon.vue

@@ -0,0 +1,43 @@
+<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="M9 16.25C8.0335 16.25 7.25 15.466 7.25 14.5C7.25 13.534 8.0335 12.75 9 12.75C9.9665 12.75 10.75 13.534 10.75 14.5C10.75 15.466 9.9665 16.25 9 16.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 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="M9 8.25C9.966 8.25 10.75 7.466 10.75 6.5C10.75 5.534 9.966 4.75 9 4.75C8.034 4.75 7.25 5.534 7.25 6.5C7.25 7.466 8.034 8.25 9 8.25Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 16.25C8.0335 16.25 7.25 15.466 7.25 14.5C7.25 13.534 8.0335 12.75 9 12.75C9.9665 12.75 10.75 13.534 10.75 14.5C10.75 15.466 9.9665 16.25 9 16.25Z" />
+      <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="M9 10.75V12.75" />
+      <path d="M13.25 7.75L14.2072 8.70749C14.3947 8.89499 14.5 9.14929 14.5 9.41449V10.5189" />
+      <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="M13.4034 4.7644C12.708 3.0041 11.0073 1.75 8.99995 1.75C6.99265 1.75 5.29196 3.0042 4.59656 4.7644" />
+      <path d="M4.75 7.75L3.7928 8.70749C3.6053 8.89499 3.5 9.14929 3.5 9.41449V10.5189" />
+      <path d="M9 8.25C9.966 8.25 10.75 7.466 10.75 6.5C10.75 5.534 9.966 4.75 9 4.75C8.034 4.75 7.25 5.534 7.25 6.5C7.25 7.466 8.034 8.25 9 8.25Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/DeleteLeftIcon.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.25 3.75H5.477C5.175 3.75 4.89 3.886 4.7 4.121L0.75 9L4.7 13.879C4.89 14.114 5.175 14.25 5.477 14.25H13.25C14.355 14.25 15.25 13.355 15.25 12.25V5.75C15.25 4.645 14.355 3.75 13.25 3.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M13.25 3.75H5.477C5.175 3.75 4.89 3.886 4.7 4.121L0.75 9L4.7 13.879C4.89 14.114 5.175 14.25 5.477 14.25H13.25C14.355 14.25 15.25 13.355 15.25 12.25V5.75C15.25 4.645 14.355 3.75 13.25 3.75Z" />
+      <path d="M6.75 6.75L11.25 11.25" />
+      <path d="M11.25 6.75L6.75 11.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/EraserIcon.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="M6.0957 6.1058L11.9292 11.9393L15.525 8.343C16.111 7.758 16.111 6.808 15.525 6.222L11.813 2.51C11.228 1.924 10.278 1.924 9.692 2.51L6.0957 6.1058Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M8.75 15.25H16" />
+      <path d="M5.87598 15.25L2.47398 11.848C1.88798 11.262 1.88798 10.312 2.47398 9.727L9.69199 2.51C10.278 1.924 11.228 1.924 11.813 2.51L15.525 6.222C16.111 6.808 16.111 7.758 15.525 8.343L8.61899 15.25H5.87598Z" />
+      <path d="M6.08301 6.11798L11.917 11.952" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/EthereumIcon.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 opacity="0.3" d="M14.75 9.5L9 1.25L3.25 9.5L9 12L14.75 9.5Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.25 9.5L9 16.75L14.75 9.5" />
+      <path d="M14.75 9.5L9 1.25L3.25 9.5L9 12L14.75 9.5Z" />
+      <path d="M9 1.25V12" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/EyeDropperIcon.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.23499 5.735L3.12799 11.842C2.29099 12.679 2.29099 14.036 3.12799 14.872C3.96499 15.709 5.32199 15.709 6.15799 14.872L12.265 8.765" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9.23499 5.735L3.12799 11.842C2.29099 12.679 2.29099 14.036 3.12799 14.872C3.96499 15.709 5.32199 15.709 6.15799 14.872L12.265 8.765" />
+      <path d="M3.128 14.872L1.75 16.25" />
+      <path d="M12.265 8.765L15.122 5.908C15.959 5.071 15.959 3.714 15.122 2.878C14.285 2.041 12.928 2.041 12.092 2.878L9.23499 5.735" />
+      <path d="M7.75 4.25L13.75 10.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Flag3Icon.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="M3.75 3.25H14.75L11.75 6.75L14.75 10.25H3.75" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.75 3.25H14.75L11.75 6.75L14.75 10.25H3.75" />
+      <path d="M3.75 1.75V16.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Heading1Icon.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="M2.75 4.75V13.25" />
+      <path d="M8.75 4.75V13.25" />
+      <path d="M2.75 9H8.75" />
+      <path d="M14.75 13.25V4.75C14.75 4.75 13.776 6.463 11.71 6.858" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Heading2Icon.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.25 4.75V13.25" />
+      <path d="M7.25 4.75V13.25" />
+      <path d="M1.25 9H7.25" />
+      <path d="M10.5 6.931C10.884 5.507 12.207 4.728 13.637 4.75C15.067 4.772 16.411 5.44 16.497 6.931C16.583 8.422 15.067 9.423 13.499 10.091C11.93 10.759 10.629 11.382 10.501 13.251H16.501" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Heading3Icon.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 4.75V13.25" />
+      <path d="M7.75 4.75V13.25" />
+      <path d="M1.75 9H7.75" />
+      <path d="M10.75 4.75H16.292L12.287 8.212C13.609 7.87 14.959 8.071 15.792 8.956C16.814 10.042 16.66 11.553 15.78 12.461C14.9 13.369 12.265 13.897 10.751 11.734" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Heading4Icon.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 4.75V13.25" />
+      <path d="M7.75 4.75V13.25" />
+      <path d="M1.75 9H7.75" />
+      <path d="M16.691 10.75H10.25V10.641L15 4.75V13.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Heading5Icon.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 4.75V13.25" />
+      <path d="M7.75 4.75V13.25" />
+      <path d="M1.75 9H7.75" />
+      <path d="M15.714 4.75H10.968L10.651 8.61C12.342 7.585 14.41 7.541 15.542 8.791C16.564 9.919 16.41 11.488 15.53 12.43C14.65 13.372 12.015 13.921 10.501 11.675" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Heading6Icon.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="M1.75 4.75V13.25" />
+      <path d="M7.75 4.75V13.25" />
+      <path d="M1.75 9H7.75" />
+      <path d="M13.5 13.25C15.0188 13.25 16.25 12.0188 16.25 10.5C16.25 8.98122 15.0188 7.75 13.5 7.75C11.9812 7.75 10.75 8.98122 10.75 10.5C10.75 12.0188 11.9812 13.25 13.5 13.25Z" />
+      <path d="M10.75 10.5V8.75C10.75 6.5409 12.5409 4.75 14.75 4.75H15.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

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/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>