@umbra.ui/icons 0.4.0 → 0.5.0

package/src/icons/PinPlusIcon.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="M9 16.25C10.5833 15.75 15 12.25 15 7.75C15 4.438 12.3137 1.75 9 1.75C5.6863 1.75 3 4.438 3 7.75C3 12.25 7.4167 15.75 9 16.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 5.25V10.25" />
+      <path d="M11.5 7.75H6.5" />
+      <path d="M9 16.25C10.5833 15.75 15 12.25 15 7.75C15 4.438 12.3137 1.75 9 1.75C5.6863 1.75 3 4.438 3 7.75C3 12.25 7.4167 15.75 9 16.25Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Playlist4Icon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="m11.5394,10.3234l4.2036,2.4774c.3427.202.3427.6965,0,.8985l-4.2036,2.4774c-.3488.2056-.7894-.0452-.7894-.4493v-4.9548c0-.404.4406-.6548.7894-.4493Z" :fill="color" opacity=".3" stroke-width="0" data-color="color-2" />
+      <path d="m7.75,11.25H2.75" />
+      <path d="m15.205,7.25H2.75" />
+      <path d="m15.25,3.25H2.75" />
+      <path d="m11.5394,10.3234l4.2036,2.4774c.3427.202.3427.6965,0,.8985l-4.2036,2.4774c-.3488.2056-.7894-.0452-.7894-.4493v-4.9548c0-.404.4406-.6548.7894-.4493Z" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/RepeatIcon.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="M2.25 6.25C2.25 5.14543 3.14543 4.25 4.25 4.25H13.75C14.8546 4.25 15.75 5.14543 15.75 6.25V12C15.75 13.1046 14.8546 14 13.75 14H4.25C3.14543 14 2.25 13.1046 2.25 12V6.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M5 13.75H4.25C3.145 13.75 2.25 12.855 2.25 11.75V6.25C2.25 5.145 3.145 4.25 4.25 4.25H13.75C14.855 4.25 15.75 5.145 15.75 6.25V11.75C15.75 12.855 14.855 13.75 13.75 13.75H8.008" />
+      <path d="M10.5 11.25L8.008 13.742L10.5 16.235" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/RepeatOnceIcon.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 opacity="0.3" d="M2.25 6C2.25 4.9 3.1454 4 4.25 4H13.75C14.8546 4 15.75 4.9 15.75 6V12C15.75 13.1 14.8546 14 13.75 14H4.25C3.1454 14 2.25 13.1 2.25 12V6Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9.25 7.25V1.75C9.25 1.75 8.62 2.85999 7.283 3.10999" />
+      <path d="M10.5 11.25L8.008 13.74L10.5 16.24" />
+      <path d="M12.25 4.25H13.75C14.855 4.25 15.75 5.14 15.75 6.25V11.75C15.75 12.86 14.855 13.75 13.75 13.75H8.008" />
+      <path d="M5 13.75H4.25C3.145 13.75 2.25 12.86 2.25 11.75V6.25C2.25 5.14 3.145 4.25 4.25 4.25H4.5085" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/RobotIcon.vue

@@ -0,0 +1,40 @@
+<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="M15.75 14.25C15.75 15.355 14.855 16.25 13.75 16.25H4.25C3.145 16.25 2.25 15.355 2.25 14.25V7.25C2.25 6.145 3.145 5.25 4.25 5.25H13.75C14.855 5.25 15.75 6.145 15.75 7.25V14.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9 2.25V5.25" />
+      <path d="M15.75 14.25C15.75 15.355 14.855 16.25 13.75 16.25H4.25C3.145 16.25 2.25 15.355 2.25 14.25V7.25C2.25 6.145 3.145 5.25 4.25 5.25H13.75C14.855 5.25 15.75 6.145 15.75 7.25V14.25Z" />
+      <path d="M6 11C6.552 11 7 10.552 7 10C7 9.448 6.552 9 6 9C5.448 9 5 9.448 5 10C5 10.552 5.448 11 6 11Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M12 11C12.552 11 13 10.552 13 10C13 9.448 12.552 9 12 9C11.448 9 11 9.448 11 10C11 10.552 11.448 11 12 11Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M2.25 10.75H1" />
+      <path d="M15.75 10.75H17" />
+      <path d="M9 3.25C9.897 3.25 10.625 2.5224 10.625 1.625C10.625 0.7276 9.897 0 9 0C8.103 0 7.375 0.7276 7.375 1.625C7.375 2.5224 8.103 3.25 9 3.25Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M7.83327 11.5H10.1666C10.4886 11.5 10.7499 11.7613 10.7499 12.0833C10.7499 13.0493 9.96588 13.8333 8.99988 13.8333C8.03388 13.8333 7.24988 13.0493 7.24988 12.0833C7.24988 11.7613 7.51127 11.5 7.83327 11.5Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/SidebarRight4Icon.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="M16.25 13.25C16.25 14.3546 15.3546 15.25 14.25 15.25L9.75 15.25L9.75 2.75L14.25 2.75C15.3546 2.75 16.25 3.64543 16.25 4.75L16.25 13.25Z" :fill="color" fill-opacity="0.3" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M9.75 2.75V15.25" />
+      <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="M13.75 6.25H12.25" />
+      <path d="M13.75 9H12.25" />
+      <path d="M13.75 11.75H12.25" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/Signal2OffIcon.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 d="M8.9617 13.281C9.3582 13.271 9.7578 13.4173 10.06 13.72" />
+      <path d="M11.3198 10.9223C11.6271 11.1075 11.9169 11.3329 12.182 11.598" />
+      <path d="M13.4794 8.76282C13.7671 8.97742 14.0429 9.21522 14.304 9.47702" />
+      <path d="M3.69699 9.47701C5.55699 7.61701 8.15199 6.938 10.548 7.441" />
+      <path d="M15.616 6.62622C15.8946 6.85302 16.1641 7.09591 16.424 7.35501" />
+      <path d="M1.57501 7.35601C4.65001 4.28101 9.15901 3.512 12.951 5.049" />
+      <path d="M2 16L16 2" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/SquareBulletListIcon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="m13.25,2.75H4.75c-1.1046,0-2,.8954-2,2v8.5c0,1.1046.8954,2,2,2h8.5c1.1046,0,2-.8954,2-2V4.75c0-1.1046-.8954-2-2-2Z" :fill="color" opacity=".3" stroke-width="0" data-color="color-2" />
+      <rect x="2.75" y="2.75" width="12.5" height="12.5" rx="2" ry="2" />
+      <line x1="8.75" y1="9" x2="12.25" y2="9" />
+      <line x1="8.75" y1="6.25" x2="12.25" y2="6.25" />
+      <line x1="8.75" y1="11.75" x2="12.25" y2="11.75" />
+      <circle cx="6" cy="6" r="1" stroke-width="0" :fill="color" />
+      <circle cx="6" cy="9" r="1" stroke-width="0" :fill="color" />
+      <circle cx="6" cy="12" r="1" stroke-width="0" :fill="color" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/TagPlusIcon.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="m10.5786,3.8286c-.6469.3952-1.0786,1.1079-1.0786,1.9214,0,1.2426,1.0074,2.25,2.25,2.25h.25v.25c0,1.2426,1.0074,2.25,2.25,2.25.4103,0,.795-.1098,1.1262-.3017,0,0,.4088.7667-.0402,1.2157l-3.922,3.922c-.781.781-2.047.781-2.828,0l-5.75-5.75c-.375-.375-.586-.884-.586-1.414V3.25c0-.552.448-1,1-1h4.922c.53,0,1.039.211,1.414.586l.9926.9926Z" :fill="color" fill-rule="evenodd" opacity=".3" stroke-width="0" data-color="color-2" />
+      <circle cx="6.25" cy="6.25" r="1.25" stroke-width="0" :fill="color" />
+      <line x1="14.25" y1="3.25" x2="14.25" y2="8.25" />
+      <line x1="16.75" y1="5.75" x2="11.75" y2="5.75" />
+      <path d="m10.051,3.301l-.4659-.4661c-.375-.375-.884-.5859-1.414-.5859H3.25c-.552,0-1,.448-1,1v4.9219c0,.53.211,1.0391.586,1.4141l5.75,5.75c.781.781,2.047.781,2.828,0l3.922-3.9219c.1662-.1663.291-.3562.3848-.5569" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/TextASparkleIcon.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path d="M5.108 11.75H12.892" />
+      <path d="M14.25 15.25L9.401 2.75H8.599L5.108 11.75" />
+      <path d="M15.493 1.492L14.547 1.177L14.231 0.230004C14.129 -0.0759965 13.622 -0.0759965 13.52 0.230004L13.204 1.177L12.258 1.492C12.105 1.543 12.001 1.686 12.001 1.848C12.001 2.01 12.105 2.153 12.258 2.204L13.204 2.519L13.52 3.466C13.571 3.619 13.714 3.722 13.875 3.722C14.036 3.722 14.18 3.618 14.23 3.466L14.546 2.519L15.492 2.204C15.645 2.153 15.749 2.01 15.749 1.848C15.749 1.686 15.645 1.543 15.492 1.492H15.493Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M4.65799 13.526L3.39499 13.105L2.97399 11.842C2.83699 11.434 2.16199 11.434 2.02499 11.842L1.60399 13.105L0.340993 13.526C0.136993 13.594 -0.00100708 13.785 -0.00100708 14C-0.00100708 14.215 0.136993 14.406 0.340993 14.474L1.60399 14.895L2.02499 16.158C2.09299 16.362 2.28499 16.5 2.49999 16.5C2.71499 16.5 2.90599 16.362 2.97499 16.158L3.39599 14.895L4.65899 14.474C4.86299 14.406 5.00099 14.215 5.00099 14C5.00099 13.785 4.86199 13.594 4.65799 13.526Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M2.75 6C3.16421 6 3.5 5.66421 3.5 5.25C3.5 4.83579 3.16421 4.5 2.75 4.5C2.33579 4.5 2 4.83579 2 5.25C2 5.66421 2.33579 6 2.75 6Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/TextSparkleIcon.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 2.75V15.25" />
+      <path d="M14.25 2.75H3.75" />
+      <path d="M4.49301 6.769L3.54701 6.454L3.23101 5.507C3.12901 5.201 2.62201 5.201 2.52001 5.507L2.20401 6.454L1.25801 6.769C1.10501 6.82 1.00101 6.963 1.00101 7.125C1.00101 7.287 1.10501 7.43 1.25801 7.481L2.20401 7.796L2.52001 8.743C2.57101 8.896 2.71401 8.999 2.87501 8.999C3.03601 8.999 3.18001 8.895 3.23001 8.743L3.54601 7.796L4.49201 7.481C4.64501 7.43 4.74901 7.287 4.74901 7.125C4.74901 6.963 4.64601 6.82 4.49301 6.769Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M16.658 9.99L15.395 9.569L14.974 8.306C14.837 7.898 14.162 7.898 14.025 8.306L13.604 9.569L12.341 9.99C12.137 10.058 11.999 10.249 11.999 10.464C11.999 10.679 12.137 10.87 12.341 10.938L13.604 11.359L14.025 12.622C14.093 12.826 14.285 12.964 14.5 12.964C14.715 12.964 14.906 12.826 14.975 12.622L15.396 11.359L16.659 10.938C16.863 10.87 17.001 10.679 17.001 10.464C17.001 10.249 16.862 10.058 16.658 9.99Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M5.25 13C5.66421 13 6 12.6642 6 12.25C6 11.8358 5.66421 11.5 5.25 11.5C4.83579 11.5 4.5 11.8358 4.5 12.25C4.5 12.6642 4.83579 13 5.25 13Z" :fill="color" data-stroke="none" stroke="none" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/WalletKeyIcon.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 opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M14.75 6.75H4C2.895 6.75 2.25 5.855 2.25 4.75V10.0941C2.5723 10.0157 2.904 10 3.25 10C4.7266 10 6.0767 10.7832 6.8403 12H9.25C10.4907 12 11.5 13.0093 11.5 14.25C11.5 14.5135 11.4527 14.7655 11.3681 15C11.3372 15.0858 11.4745 15.25 11.5843 15.25H14.75C15.302 15.25 15.75 14.802 15.75 14.25V7.75C15.75 7.198 15.302 6.75 14.75 6.75Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M12.5 12C13.052 12 13.5 11.552 13.5 11C13.5 10.448 13.052 10 12.5 10C11.948 10 11.5 10.448 11.5 11C11.5 11.552 11.948 12 12.5 12Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M12.0781 15.25H14.75C15.302 15.25 15.75 14.802 15.75 14.25V7.75C15.75 7.198 15.302 6.75 14.75 6.75H4.25C3.145 6.75 2.25 5.855 2.25 4.75V9.35059" />
+      <path d="M2.25 4.75C2.25 3.645 3.145 2.75 4.25 2.75H12.75C13.302 2.75 13.75 3.198 13.75 3.75V4.25" />
+      <path d="M3.25 16.25C4.35457 16.25 5.25 15.3546 5.25 14.25C5.25 13.1454 4.35457 12.25 3.25 12.25C2.14543 12.25 1.25 13.1454 1.25 14.25C1.25 15.3546 2.14543 16.25 3.25 16.25Z" />
+      <path d="M5.25 14.25H9.25" />
+      <path d="M7.75 14.25V15.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>

package/src/icons/WindowLinkIcon.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'currentColor'
+})
+</script>
+
+<template>
+  <svg
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 18 18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" :stroke="color">
+      <path opacity="0.3" d="M1.75 4.75C1.75 3.65 2.645 2.75 3.75 2.75H14.25C15.355 2.75 16.25 3.65 16.25 4.75V7.75H1.75V4.75Z" :fill="color" data-color="color-2" data-stroke="none" stroke="none" />
+      <path d="M4.25 6C4.664 6 5 5.66 5 5.25C5 4.84 4.664 4.5 4.25 4.5C3.836 4.5 3.5 4.84 3.5 5.25C3.5 5.66 3.836 6 4.25 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M6.75 6C7.164 6 7.5 5.66 7.5 5.25C7.5 4.84 7.164 4.5 6.75 4.5C6.336 4.5 6 4.84 6 5.25C6 5.66 6.336 6 6.75 6Z" :fill="color" data-stroke="none" stroke="none" />
+      <path d="M1.75 7.75H16.25" />
+      <path d="M16.25 9.31042V4.75C16.25 3.65 15.355 2.75 14.25 2.75H3.75C2.645 2.75 1.75 3.65 1.75 4.75V13.25C1.75 14.35 2.645 15.25 3.75 15.25H6.7566" />
+      <path d="M12 16.75H11.5C10.5335 16.75 9.75 15.9665 9.75 15V14C9.75 13.0335 10.5335 12.25 11.5 12.25H12" />
+      <path d="M15 16.75H15.5C16.4665 16.75 17.25 15.9665 17.25 15V14C17.25 13.0335 16.4665 12.25 15.5 12.25H15" />
+      <path d="M12.25 14.5H14.75" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+</style>