@umbra.ui/icons 0.1.0

package/src/animated/DotsAnim3GlyphIcon.vue

@@ -0,0 +1,58 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 3</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-dots-3-24-icon-f">
+        <circle cx="3" cy="12" :fill="props.color" r="2" />
+        <circle cx="12" cy="12" r="2" data-color="color-2" />
+        <circle cx="21" cy="12" :fill="props.color" r="2" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-3-24-icon-f > * {
+  --animation-duration: 0.8s;
+  transform-origin: 50% 50%;
+  animation: nc-loop-dots-3-anim var(--animation-duration) infinite;
+}
+.nc-loop-dots-3-24-icon-f > :nth-child(2) {
+  animation-delay: 0.1s;
+}
+.nc-loop-dots-3-24-icon-f > :nth-child(3) {
+  animation-delay: 0.2s;
+}
+@keyframes nc-loop-dots-3-anim {
+  0%,
+  100%,
+  60% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(20%);
+  }
+}
+</style>

package/src/animated/DotsAnim3OutlineIcon.vue

@@ -0,0 +1,86 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 3</title>
+    <g
+      class="nc-icon-wrapper"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+      stroke-width="2"
+      :fill="props.color"
+      :stroke="props.color"
+    >
+      <g class="nc-loop-dots-3-24-icon-o">
+        <circle
+          cx="3"
+          cy="12"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          r="2"
+          stroke-miterlimit="10"
+          data-color="color-2"
+        />
+        <circle
+          cx="21"
+          cy="12"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-3-24-icon-o > * {
+  --animation-duration: 0.8s;
+  transform-origin: 50% 50%;
+  animation: nc-loop-dots-3-anim var(--animation-duration) infinite;
+}
+.nc-loop-dots-3-24-icon-o > :nth-child(2) {
+  animation-delay: 0.1s;
+}
+.nc-loop-dots-3-24-icon-o > :nth-child(3) {
+  animation-delay: 0.2s;
+}
+@keyframes nc-loop-dots-3-anim {
+  0%,
+  100%,
+  60% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(20%);
+  }
+}
+</style>

package/src/animated/DotsAnim4GlyphIcon.vue

@@ -0,0 +1,67 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 4</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-dots-4-24-icon-f">
+        <circle cx="4" cy="12" :fill="props.color" r="3" />
+        <circle cx="12" cy="12" r="3" data-color="color-2" />
+        <circle cx="20" cy="12" :fill="props.color" r="3" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-4-24-icon-f {
+  --animation-duration: 0.8s;
+}
+.nc-loop-dots-4-24-icon-f * {
+  opacity: 0.4;
+  transform: scale(0.75);
+  animation: nc-loop-dots-4-anim var(--animation-duration) infinite;
+}
+.nc-loop-dots-4-24-icon-f :nth-child(1) {
+  transform-origin: 4px 12px;
+  animation-delay: calc(var(--animation-duration) / -2.666);
+}
+.nc-loop-dots-4-24-icon-f :nth-child(2) {
+  transform-origin: 12px 12px;
+  animation-delay: calc(var(--animation-duration) / -5.333);
+}
+.nc-loop-dots-4-24-icon-f :nth-child(3) {
+  transform-origin: 20px 12px;
+}
+@keyframes nc-loop-dots-4-anim {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.75);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/src/animated/DotsAnim4OutlineIcon.vue

@@ -0,0 +1,95 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 4</title>
+    <g
+      class="nc-icon-wrapper"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+      stroke-width="2"
+      :fill="props.color"
+      :stroke="props.color"
+    >
+      <g class="nc-loop-dots-4-24-icon-o">
+        <circle
+          cx="4"
+          cy="12"
+          fill="none"
+          r="3"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          r="3"
+          stroke-miterlimit="10"
+          data-color="color-2"
+        />
+        <circle
+          cx="20"
+          cy="12"
+          fill="none"
+          r="3"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-4-24-icon-o {
+  --animation-duration: 0.8s;
+}
+.nc-loop-dots-4-24-icon-o * {
+  opacity: 0.4;
+  transform: scale(0.75);
+  animation: nc-loop-dots-4-anim var(--animation-duration) infinite;
+}
+.nc-loop-dots-4-24-icon-o :nth-child(1) {
+  transform-origin: 4px 12px;
+  animation-delay: calc(var(--animation-duration) / -2.666);
+}
+.nc-loop-dots-4-24-icon-o :nth-child(2) {
+  transform-origin: 12px 12px;
+  animation-delay: calc(var(--animation-duration) / -5.333);
+}
+.nc-loop-dots-4-24-icon-o :nth-child(3) {
+  transform-origin: 20px 12px;
+}
+@keyframes nc-loop-dots-4-anim {
+  0%,
+  100% {
+    opacity: 0.4;
+    transform: scale(0.75);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/src/animated/DotsAnim5GlyphIcon.vue

@@ -0,0 +1,70 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 5</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-dots-5-24-icon-f">
+        <circle cx="12" cy="4" :fill="props.color" r="4" />
+        <circle cx="20" cy="12" r="4" data-color="color-2" />
+        <circle cx="12" cy="20" :fill="props.color" r="4" />
+        <circle cx="4" cy="12" r="4" data-color="color-2" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-5-24-icon-f {
+  --animation-duration: 1s;
+}
+.nc-loop-dots-5-24-icon-f * {
+  animation: nc-loop-dots-5-anim var(--animation-duration) infinite;
+}
+.nc-loop-dots-5-24-icon-f :nth-child(1) {
+  transform-origin: 12px 4px;
+}
+.nc-loop-dots-5-24-icon-f :nth-child(2) {
+  transform-origin: 20px 12px;
+  animation-delay: 0.1s;
+}
+.nc-loop-dots-5-24-icon-f :nth-child(3) {
+  transform-origin: 12px 20px;
+  animation-delay: 0.2s;
+}
+.nc-loop-dots-5-24-icon-f :nth-child(4) {
+  transform-origin: 4px 12px;
+  animation-delay: 0.3s;
+}
+@keyframes nc-loop-dots-5-anim {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.7);
+  }
+}
+</style>

package/src/animated/DotsAnim5OutlineIcon.vue

@@ -0,0 +1,105 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 5</title>
+    <g
+      class="nc-icon-wrapper"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+      stroke-width="2"
+      :fill="props.color"
+      :stroke="props.color"
+    >
+      <g class="nc-loop-dots-5-24-icon-o">
+        <circle
+          cx="12"
+          cy="4"
+          fill="none"
+          r="3"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <circle
+          cx="20"
+          cy="12"
+          fill="none"
+          r="3"
+          stroke-miterlimit="10"
+          data-color="color-2"
+        />
+        <circle
+          cx="12"
+          cy="20"
+          fill="none"
+          r="3"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <circle
+          cx="4"
+          cy="12"
+          fill="none"
+          r="3"
+          stroke-miterlimit="10"
+          data-color="color-2"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-5-24-icon-o {
+  --animation-duration: 1s;
+}
+.nc-loop-dots-5-24-icon-o * {
+  animation: nc-loop-dots-5-anim var(--animation-duration) infinite;
+}
+.nc-loop-dots-5-24-icon-o :nth-child(1) {
+  transform-origin: 12px 4px;
+}
+.nc-loop-dots-5-24-icon-o :nth-child(2) {
+  transform-origin: 20px 12px;
+  animation-delay: 0.1s;
+}
+.nc-loop-dots-5-24-icon-o :nth-child(3) {
+  transform-origin: 12px 20px;
+  animation-delay: 0.2s;
+}
+.nc-loop-dots-5-24-icon-o :nth-child(4) {
+  transform-origin: 4px 12px;
+  animation-delay: 0.3s;
+}
+@keyframes nc-loop-dots-5-anim {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.7);
+  }
+}
+</style>

package/src/animated/DotsAnim6GlyphIcon.vue

@@ -0,0 +1,70 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 6</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-dots-anim-6-24-icon-f">
+        <circle cx="3" cy="12" :fill="props.color" r="2" />
+        <circle cx="12" cy="12" :fill="props.color" r="2" />
+        <circle cx="21" cy="12" :fill="props.color" r="2" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-anim-6-24-icon-f,
+.nc-loop-dots-anim-6-24-icon-f > * {
+  --animation-duration: 1.2s;
+}
+.nc-loop-dots-anim-6-24-icon-f {
+  transform-origin: 50% 50%;
+  animation: nc-loop-dots-anim-6 var(--animation-duration) infinite;
+}
+.nc-loop-dots-anim-6-24-icon-f > :nth-child(2),
+.nc-loop-dots-anim-6-24-icon-f > :nth-child(3) {
+  transform-origin: 16.5px 50%;
+  animation: nc-loop-dots-anim-6-inner var(--animation-duration) infinite;
+}
+@keyframes nc-loop-dots-anim-6 {
+  0%,
+  50% {
+    transform: rotate(0);
+  }
+  100% {
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    transform: rotate(180deg);
+  }
+}
+@keyframes nc-loop-dots-anim-6-inner {
+  0% {
+    transform: rotate(0);
+  }
+  100%,
+  50% {
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    transform: rotate(180deg);
+  }
+}
+</style>

package/src/animated/DotsAnim6OutlineIcon.vue

@@ -0,0 +1,98 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 6</title>
+    <g
+      class="nc-icon-wrapper"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+      stroke-width="2"
+      :fill="props.color"
+      :stroke="props.color"
+    >
+      <g class="nc-loop-dots-anim-6-24-icon-o">
+        <circle
+          cx="3"
+          cy="12"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <circle
+          cx="21"
+          cy="12"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-anim-6-24-icon-o,
+.nc-loop-dots-anim-6-24-icon-o > * {
+  --animation-duration: 1.2s;
+}
+.nc-loop-dots-anim-6-24-icon-o {
+  transform-origin: 50% 50%;
+  animation: nc-loop-dots-anim-6 var(--animation-duration) infinite;
+}
+.nc-loop-dots-anim-6-24-icon-o > :nth-child(2),
+.nc-loop-dots-anim-6-24-icon-o > :nth-child(3) {
+  transform-origin: 16.5px 50%;
+  animation: nc-loop-dots-anim-6-inner var(--animation-duration) infinite;
+}
+@keyframes nc-loop-dots-anim-6 {
+  0%,
+  50% {
+    transform: rotate(0);
+  }
+  100% {
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    transform: rotate(180deg);
+  }
+}
+@keyframes nc-loop-dots-anim-6-inner {
+  0% {
+    transform: rotate(0);
+  }
+  100%,
+  50% {
+    animation-timing-function: cubic-bezier(1, 0, 0, 1);
+    transform: rotate(180deg);
+  }
+}
+</style>

package/src/animated/DotsAnim7GlyphIcon.vue

@@ -0,0 +1,55 @@
+<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="props.size"
+    :height="props.size"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>dots anim 7</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-dots-anim-7-icon-f">
+        <circle cx="5.5" cy="5.5" r="4.5" data-color="color-2" />
+        <circle cx="18.5" cy="5.5" :fill="props.color" r="4.5" />
+        <circle cx="18.5" cy="18.5" r="4.5" data-color="color-2" />
+        <circle cx="5.5" cy="18.5" :fill="props.color" r="4.5" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-anim-7-icon-f {
+  --animation-duration: 1s;
+  transform-origin: 50% 50%;
+  animation: nc-loop-dots-anim-7 var(--animation-duration) infinite
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+@keyframes nc-loop-dots-anim-7 {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.7) rotate(90deg);
+  }
+  100% {
+    transform: scale(1) rotate(180deg);
+  }
+}
+</style>