@umbra.ui/icons 0.1.0

package/src/icons/NodesIcon.vue

@@ -0,0 +1,41 @@
+<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 5.75C10.1046 5.75 11 4.85457 11 3.75C11 2.64543 10.1046 1.75 9 1.75C7.89543 1.75 7 2.64543 7 3.75C7 4.85457 7.89543 5.75 9 5.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.80399 14.75C4.90856 14.75 5.80399 13.8546 5.80399 12.75C5.80399 11.6454 4.90856 10.75 3.80399 10.75C2.69942 10.75 1.80399 11.6454 1.80399 12.75C1.80399 13.8546 2.69942 14.75 3.80399 14.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.196 14.75C15.3006 14.75 16.196 13.8546 16.196 12.75C16.196 11.6454 15.3006 10.75 14.196 10.75C13.0914 10.75 12.196 11.6454 12.196 12.75C12.196 13.8546 13.0914 14.75 14.196 14.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.998 3.82599C13.052 4.51899 14.628 6.24999 15.102 8.39499" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.87101 10.981C2.44401 8.856 3.15501 6.625 4.77601 5.142" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M13.131 14.443C11.504 15.876 9.21701 16.375 7.12201 15.713" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9 5.75C10.1046 5.75 11 4.85457 11 3.75C11 2.64543 10.1046 1.75 9 1.75C7.89543 1.75 7 2.64543 7 3.75C7 4.85457 7.89543 5.75 9 5.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.80399 14.75C4.90856 14.75 5.80399 13.8546 5.80399 12.75C5.80399 11.6454 4.90856 10.75 3.80399 10.75C2.69942 10.75 1.80399 11.6454 1.80399 12.75C1.80399 13.8546 2.69942 14.75 3.80399 14.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M14.196 14.75C15.3006 14.75 16.196 13.8546 16.196 12.75C16.196 11.6454 15.3006 10.75 14.196 10.75C13.0914 10.75 12.196 11.6454 12.196 12.75C12.196 13.8546 13.0914 14.75 14.196 14.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/NoteIcon.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="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V13.25C1.75 14.3546 2.64543 15.25 3.75 15.25H14.25C15.3546 15.25 16.25 14.3546 16.25 13.25V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.25 2.75H3.75C2.64543 2.75 1.75 3.64543 1.75 4.75V13.25C1.75 14.3546 2.64543 15.25 3.75 15.25H14.25C15.3546 15.25 16.25 14.3546 16.25 13.25V4.75C16.25 3.64543 15.3546 2.75 14.25 2.75Z" />
+      <path d="M5 6.25H13" />
+      <path d="M5 11.75H9.25" />
+      <path d="M5 9H13" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/NotificationIcon.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="M14.5 5.75C15.7426 5.75 16.75 4.74264 16.75 3.5C16.75 2.25736 15.7426 1.25 14.5 1.25C13.2574 1.25 12.25 2.25736 12.25 3.5C12.25 4.74264 13.2574 5.75 14.5 5.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M14.75 8.5V13.75C14.75 14.855 13.855 15.75 12.75 15.75H4.25C3.145 15.75 2.25 14.855 2.25 13.75V5.25C2.25 4.145 3.145 3.25 4.25 3.25H9.5" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M14.5 5.75C15.7426 5.75 16.75 4.74264 16.75 3.5C16.75 2.25736 15.7426 1.25 14.5 1.25C13.2574 1.25 12.25 2.25736 12.25 3.5C12.25 4.74264 13.2574 5.75 14.5 5.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/OfficeIcon.vue

@@ -0,0 +1,43 @@
+<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="M11.25 6.25H15.25C15.802 6.25 16.25 6.698 16.25 7.25V15.25C16.25 15.802 15.802 16.25 15.25 16.25H10.25V7.25C10.25 6.698 10.698 6.25 11.25 6.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.75 8.75H6.75C7.302 8.75 7.75 9.198 7.75 9.75V16.25H2.75C2.198 16.25 1.75 15.802 1.75 15.25V9.75C1.75 9.198 2.198 8.75 2.75 8.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M11.25 6.25H15.25C15.802 6.25 16.25 6.698 16.25 7.25V15.25C16.25 15.802 15.802 16.25 15.25 16.25H10.25V7.25C10.25 6.698 10.698 6.25 11.25 6.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 8.75H13.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 11.25H13.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.75 13.75H13.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 8.75H6.75C7.302 8.75 7.75 9.198 7.75 9.75V16.25H2.75C2.198 16.25 1.75 15.802 1.75 15.25V9.75C1.75 9.198 2.198 8.75 2.75 8.75Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.25 11.25H5.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.25 13.75H5.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.25 6.25V4.448C5.25 4.028 5.512 3.654 5.906 3.509L11.406 1.493C12.059 1.254 12.75 1.737 12.75 2.432V3.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M7.75 16.25H10.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/OrderedListIcon.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="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>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/PaintbrushIcon.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="M1.75 14.706C4.453 15.518 6.646 15.586 8.439 13.751C9.52 12.666 9.52 10.906 8.439 9.81999C7.358 8.73399 5.613 8.71799 4.523 9.81999C2.75 11.612 4.298 13.314 1.75 14.706Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M6.95599 9.04399L13.534 2.46599C14.155 1.84499 15.163 1.84499 15.784 2.46599C16.405 3.08699 16.405 4.09499 15.784 4.71599L9.20599 11.294" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M1.75 14.706C4.453 15.518 6.646 15.586 8.439 13.751C9.52 12.666 9.52 10.906 8.439 9.81999C7.358 8.73399 5.613 8.71799 4.523 9.81999C2.75 11.612 4.298 13.314 1.75 14.706Z" :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/PaperPlane2Icon.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="M15.947 2.73L11.793 15.653C11.651 16.096 11.05 16.162 10.816 15.759L7.65698 10.343L2.24098 7.184C1.83898 6.949 1.90398 6.349 2.34698 6.207L15.27 2.053C15.687 1.919 16.081 2.313 15.947 2.73Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M15.813 2.187L7.65701 10.343" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.947 2.73L11.793 15.653C11.651 16.096 11.05 16.162 10.816 15.759L7.65698 10.343L2.24098 7.184C1.83898 6.949 1.90398 6.349 2.34698 6.207L15.27 2.053C15.687 1.919 16.081 2.313 15.947 2.73Z" :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/PaperclipIcon.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="M7.75 5V11.75C7.75 12.578 8.422 13.25 9.25 13.25C10.078 13.25 10.75 12.578 10.75 11.75V4.75C10.75 3.093 9.407 1.75 7.75 1.75C6.093 1.75 4.75 3.093 4.75 4.75V11.75C4.75 14.235 6.765 16.25 9.25 16.25C11.735 16.25 13.75 14.235 13.75 11.75V5" :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/Password2Icon.vue

@@ -0,0 +1,43 @@
+<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="M15.25 3.75V14.25" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.259 8.19701L4.25 8.84401" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3.01901 10.537L4.25001 8.84399" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.481 10.537L4.25 8.84399" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.241 8.19701L4.25 8.84401" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.25 6.75V8.844" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M8.509 8.19701L10.5 8.84401" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M9.26901 10.537L10.5 8.84399" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.731 10.537L10.5 8.84399" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M12.491 8.19701L10.5 8.84401" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10.5 6.75V8.844" :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/Pen2Icon.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 fill-rule="evenodd" clip-rule="evenodd" d="M13.5606 7.47042L10.5306 4.44042L4.266 10.705C3.32896 11.642 2.76299 15.1756 2.75119 15.2498C2.7504 15.2499 2.75 15.25 2.75 15.25L2.751 15.251C2.751 15.251 2.75106 15.2506 2.75119 15.2498C2.82545 15.238 6.35897 14.672 7.296 13.735L13.5606 7.47042Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10.547 4.422L13.578 7.453" />
+      <path d="M2.75 15.25C2.75 15.25 6.349 14.682 7.296 13.735C8.243 12.788 14.623 6.408 14.623 6.408C15.46 5.571 15.46 4.214 14.623 3.378C13.786 2.541 12.429 2.541 11.593 3.378C11.593 3.378 5.213 9.758 4.266 10.705C3.319 11.652 2.751 15.251 2.751 15.251L2.75 15.25Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Pen3Icon.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 fill-rule="evenodd" clip-rule="evenodd" d="M13.0606 7.97042L10.0306 4.94042L4.266 10.705C3.32897 11.642 2.763 15.1755 2.75119 15.2498C2.7504 15.2499 2.75 15.25 2.75 15.25L2.751 15.251C2.751 15.251 2.75106 15.2506 2.75119 15.2498C2.82546 15.238 6.35897 14.672 7.296 13.735L13.0606 7.97042Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10 5L13.586 8.586C14.367 9.367 14.367 10.633 13.586 11.414L12 13" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.75 15.25C2.75 15.25 6.349 14.682 7.296 13.735C8.243 12.788 14.623 6.408 14.623 6.408C15.46 5.571 15.46 4.214 14.623 3.378C13.786 2.541 12.429 2.541 11.593 3.378C11.593 3.378 5.213 9.758 4.266 10.705C3.319 11.652 2.751 15.251 2.751 15.251L2.75 15.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/PenNib3Icon.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 d="M15.241 8.057L13.649 12.553C13.532 12.883 13.252 13.128 12.909 13.198L5.752 14.679C5.224 14.788 4.756 14.321 4.866 13.793L6.347 6.636C6.418 6.293 6.663 6.013 6.992 5.896L11.488 4.304" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M10 9.545L5.07001 14.475" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M2.44299 14.142C1.16799 13.139 0.835992 12.249 0.776992 11.604C0.602992 9.68 2.75199 8.653 2.73799 6.506C2.72899 5.129 1.83399 4.015 1.10399 3.304" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M15.241 8.057L13.649 12.553C13.532 12.883 13.252 13.128 12.909 13.198L5.752 14.679C5.224 14.788 4.756 14.321 4.866 13.793L6.347 6.636C6.418 6.293 6.663 6.013 6.992 5.896L11.488 4.304" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M11.496 2.296L11.195 2.597C10.804 2.988 10.804 3.621 11.195 4.011L13.364 6.18L15.533 8.349C15.924 8.74 16.557 8.74 16.947 8.349L17.248 8.048" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M10 10.295C10.4142 10.295 10.75 9.95921 10.75 9.545C10.75 9.13079 10.4142 8.795 10 8.795C9.58579 8.795 9.25 9.13079 9.25 9.545C9.25 9.95921 9.58579 10.295 10 10.295Z" :fill="color" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/PenPlusIcon.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 stroke-linecap="round" stroke-width="1.5" fill="none" :stroke="color" stroke-linejoin="round">
+      <path d="M3.25 15.75C3.25 15.75 6.849 15.182 7.796 14.235C8.743 13.288 15.123 6.908 15.123 6.908C15.96 6.071 15.96 4.714 15.123 3.878C14.286 3.041 12.929 3.041 12.093 3.878C12.093 3.878 5.713 10.258 4.766 11.205C3.819 12.152 3.251 15.751 3.251 15.751L3.25 15.75Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M3.25 15.75C3.25 15.75 6.849 15.182 7.796 14.235C8.743 13.288 15.123 6.908 15.123 6.908C15.96 6.071 15.96 4.714 15.123 3.878C14.286 3.041 12.929 3.041 12.093 3.878C12.093 3.878 5.713 10.258 4.766 11.205C3.819 12.152 3.251 15.751 3.251 15.751L3.25 15.75Z" />
+      <path d="M4.25 1.75V6.75" />
+      <path d="M6.75 4.25H1.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/PenSparkleIcon.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="M2.75 15.25C2.75 15.25 6.349 14.682 7.296 13.735C8.243 12.788 14.623 6.408 14.623 6.408C15.46 5.571 15.46 4.214 14.623 3.378C13.786 2.541 12.429 2.541 11.593 3.378C11.593 3.378 5.213 9.758 4.266 10.705C3.319 11.652 2.751 15.251 2.751 15.251L2.75 15.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M2.75 15.25C2.75 15.25 6.349 14.682 7.296 13.735C8.243 12.788 14.623 6.408 14.623 6.408C15.46 5.571 15.46 4.214 14.623 3.378C13.786 2.541 12.429 2.541 11.593 3.378C11.593 3.378 5.213 9.758 4.266 10.705C3.319 11.652 2.751 15.251 2.751 15.251L2.75 15.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M5.49301 3.492L4.54701 3.177L4.23101 2.23C4.12901 1.924 3.62201 1.924 3.52001 2.23L3.20401 3.177L2.25801 3.492C2.10501 3.543 2.00101 3.686 2.00101 3.848C2.00101 4.01 2.10501 4.153 2.25801 4.204L3.20401 4.519L3.52001 5.466C3.57101 5.619 3.71401 5.722 3.87501 5.722C4.03601 5.722 4.18001 5.618 4.23001 5.466L4.54601 4.519L5.49201 4.204C5.64501 4.153 5.74901 4.01 5.74901 3.848C5.74901 3.686 5.64601 3.543 5.49301 3.492Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M16.658 12.99L15.395 12.569L14.974 11.306C14.837 10.898 14.162 10.898 14.025 11.306L13.604 12.569L12.341 12.99C12.137 13.058 11.999 13.249 11.999 13.464C11.999 13.679 12.137 13.87 12.341 13.938L13.604 14.359L14.025 15.622C14.093 15.826 14.285 15.964 14.5 15.964C14.715 15.964 14.906 15.826 14.975 15.622L15.396 14.359L16.659 13.938C16.863 13.87 17.001 13.679 17.001 13.464C17.001 13.249 16.862 13.058 16.658 12.99Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M7.75 2.5C8.16421 2.5 8.5 2.16421 8.5 1.75C8.5 1.33579 8.16421 1 7.75 1C7.33579 1 7 1.33579 7 1.75C7 2.16421 7.33579 2.5 7.75 2.5Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/PenWriting4Icon.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="M6.836 10.164C6.836 10.164 8.87 10.13 9.586 9.414C10.302 8.698 14.836 4.164 14.836 4.164C15.388 3.612 15.388 2.716 14.836 2.164C14.284 1.612 13.388 1.612 12.836 2.164C12.836 2.164 8.302 6.698 7.586 7.414C6.87 8.13 6.836 10.164 6.836 10.164Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M4.25 10.25H3.25C2.422 10.25 1.75 10.922 1.75 11.75C1.75 12.578 2.422 13.25 3.25 13.25H14.75C15.578 13.25 16.25 13.922 16.25 14.75C16.25 15.578 15.578 16.25 14.75 16.25H12.75" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.836 10.164C6.836 10.164 8.87 10.13 9.586 9.414C10.302 8.698 14.836 4.164 14.836 4.164C15.388 3.612 15.388 2.716 14.836 2.164C14.284 1.612 13.388 1.612 12.836 2.164C12.836 2.164 8.302 6.698 7.586 7.414C6.87 8.13 6.836 10.164 6.836 10.164Z" :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/PenWriting6Icon.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="M14.7811 6.9662L12.054 4.9308L7.38101 11.121C6.20901 12.673 6.39601 15.25 6.39601 15.25C6.39601 15.25 8.92501 14.723 10.097 13.171L14.7811 6.9662Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.054 4.932L14.77 6.982" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M6.39601 15.25C6.39601 15.25 8.92501 14.723 10.097 13.171L15.906 5.476C16.472 4.726 16.323 3.659 15.573 3.093C14.823 2.527 13.756 2.676 13.19 3.426L7.38101 11.121C6.20901 12.673 6.39601 15.25 6.39601 15.25Z" :stroke="color" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M4.23199 15.25C2.29899 13.953 1.83499 12.792 1.76099 11.98C1.56699 9.84 3.95699 8.699 3.94099 6.311C3.93099 4.779 2.93499 3.541 2.12399 2.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/PhoneIcon.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 :fill="color">
+      <path d="M11.347 10.646L10.206 12.072C8.43903 11.033 6.96603 9.56099 5.92803 7.79399L7.35403 6.65299C7.69803 6.37799 7.81303 5.90499 7.63403 5.50299L6.33403 2.57599C6.14103 2.14199 5.66303 1.91199 5.20403 2.03099L2.72903 2.67299C2.25103 2.79799 1.94203 3.26099 2.01003 3.74999C2.90203 10.104 7.89603 15.098 14.251 15.991C14.74 16.058 15.203 15.749 15.327 15.272L15.969 12.797C16.088 12.338 15.858 11.861 15.425 11.668L12.498 10.368C12.096 10.189 11.624 10.304 11.348 10.647L11.347 10.646Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M11.347 10.646L10.206 12.072C8.43903 11.033 6.96603 9.56099 5.92803 7.79399L7.35403 6.65299C7.69803 6.37799 7.81303 5.90499 7.63403 5.50299L6.33403 2.57599C6.14103 2.14199 5.66303 1.91199 5.20403 2.03099L2.72903 2.67299C2.25103 2.79799 1.94203 3.26099 2.01003 3.74999C2.90203 10.104 7.89603 15.098 14.251 15.991C14.74 16.058 15.203 15.749 15.327 15.272L15.969 12.797C16.088 12.338 15.858 11.861 15.425 11.668L12.498 10.368C12.096 10.189 11.624 10.304 11.348 10.647L11.347 10.646Z" :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>