@umbra.ui/icons 0.1.0

package/src/animated/CircleAnim3GlyphIcon.vue

@@ -0,0 +1,56 @@
+<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>circle anim 3</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-circle-24-icon-f">
+        <path
+          d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z"
+          :fill="props.color"
+          opacity=".4"
+        />
+        <path
+          d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z"
+          data-color="color-2"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-circle-24-icon-f {
+  --animation-duration: 0.5s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-circle-anim var(--animation-duration) infinite linear;
+}
+@keyframes nc-loop-circle-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/CircleAnim3OutlineIcon.vue

@@ -0,0 +1,60 @@
+<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>circle 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-circle-3-24-icon-o">
+        <path
+          d="M21 18.326A11 11 0 1 1 23 12"
+          fill="none"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-circle-3-24-icon-o {
+  --animation-duration: 0.7s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-circle-3-anim var(--animation-duration) infinite linear;
+}
+@keyframes nc-loop-circle-3-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/CircleAnimOutlineIcon.vue

@@ -0,0 +1,69 @@
+<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>circle anim</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-circle-24-icon-o">
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          opacity=".4"
+          r="11"
+          :stroke="props.color"
+        />
+        <path
+          d="M12 1a11 11 0 0 1 11 11"
+          data-cap="butt"
+          data-color="color-2"
+          fill="none"
+          stroke-linecap="butt"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-circle-24-icon-o {
+  --animation-duration: 0.5s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-circle-anim var(--animation-duration) infinite linear;
+}
+@keyframes nc-loop-circle-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/ClockAnimGlyphIcon.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>clock anim</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-clock-anim-icon-f">
+        <path
+          d="M12,24A12,12,0,1,1,24,12,12.013,12.013,0,0,1,12,24ZM12,2A10,10,0,1,0,22,12,10.011,10.011,0,0,0,12,2Z"
+          :fill="props.color"
+        />
+        <path
+          d="M12,13a1,1,0,0,1-1-1V5a1,1,0,0,1,2,0v7A1,1,0,0,1,12,13Z"
+          data-color="color-2"
+        />
+        <path d="M13,6v6a1,1,0,0,1-2,0V6a1,1,0,0,1,2,0Z" data-color="color-2" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-clock-anim-icon-f > * {
+  --animation-duration: 1s;
+  transform-origin: 50% 50%;
+}
+.nc-loop-clock-anim-icon-f > :nth-last-child(2) {
+  animation: nc-loop-clock-anim-m calc(var(--animation-duration) / 2) infinite
+    linear;
+}
+.nc-loop-clock-anim-icon-f > :nth-last-child(1) {
+  animation: nc-loop-clock-anim-h var(--animation-duration) infinite linear;
+}
+@keyframes nc-loop-clock-anim-h {
+  0% {
+    transform: rotate(90deg);
+  }
+  100% {
+    transform: rotate(450deg);
+  }
+}
+@keyframes nc-loop-clock-anim-m {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/ClockAnimOutlineIcon.vue

@@ -0,0 +1,94 @@
+<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>clock anim</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-clock-anim-icon-o">
+        <circle
+          cx="12"
+          cy="12"
+          fill="none"
+          r="11"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <line
+          data-color="color-2"
+          fill="none"
+          stroke-miterlimit="10"
+          x1="12"
+          x2="12"
+          y1="12"
+          y2="5"
+        />
+        <line
+          data-color="color-2"
+          fill="none"
+          stroke-miterlimit="10"
+          x1="12"
+          x2="12"
+          y1="12"
+          y2="6"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-clock-anim-icon-o > * {
+  --animation-duration: 1s;
+  transform-origin: 50% 50%;
+}
+.nc-loop-clock-anim-icon-o > :nth-last-child(2) {
+  animation: nc-loop-clock-anim-m calc(var(--animation-duration) / 2) infinite
+    linear;
+}
+.nc-loop-clock-anim-icon-o > :nth-last-child(1) {
+  animation: nc-loop-clock-anim-h var(--animation-duration) infinite linear;
+}
+@keyframes nc-loop-clock-anim-h {
+  0% {
+    transform: rotate(90deg);
+  }
+  100% {
+    transform: rotate(450deg);
+  }
+}
+@keyframes nc-loop-clock-anim-m {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/CubesAnimOutlineIcon.vue

@@ -0,0 +1,114 @@
+<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>cubes anim</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-cubes-24-icon-o">
+        <rect
+          fill="none"
+          height="8"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          width="8"
+          x="1"
+          y="8"
+        />
+        <rect
+          fill="none"
+          height="8"
+          stroke-miterlimit="10"
+          width="8"
+          x="15"
+          y="8"
+          data-color="color-2"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          x1="1"
+          x2="9"
+          y1="8"
+          y2="8"
+        />
+        <line
+          fill="none"
+          stroke-miterlimit="10"
+          x1="15"
+          x2="23"
+          y1="8"
+          y2="8"
+          data-color="color-2"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-cubes-24-icon-o {
+  --animation-duration: 1s;
+}
+.nc-loop-cubes-24-icon-o * {
+  transform-origin: 50% 50%;
+}
+.nc-loop-cubes-24-icon-o :nth-child(1),
+.nc-loop-cubes-24-icon-o :nth-child(2) {
+  animation: nc-loop-cubes-24-anim-1 var(--animation-duration) infinite
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.nc-loop-cubes-24-icon-o :nth-child(3),
+.nc-loop-cubes-24-icon-o :nth-child(4) {
+  animation: nc-loop-cubes-24-anim-2 var(--animation-duration) infinite
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.nc-loop-cubes-24-icon-o :nth-child(2),
+.nc-loop-cubes-24-icon-o :nth-child(4) {
+  animation-delay: calc(var(--animation-duration) / 5);
+}
+@keyframes nc-loop-cubes-24-anim-1 {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(1.2);
+  }
+}
+@keyframes nc-loop-cubes-24-anim-2 {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(8px);
+  }
+}
+</style>

package/src/animated/DotsAnim2GlyphIcon.vue

@@ -0,0 +1,74 @@
+<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 2</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-dots-2-24-icon-f">
+        <circle cx="12" cy="2" :fill="props.color" r="2" opacity="0.6" />
+        <circle
+          cx="19.071"
+          cy="4.929"
+          :fill="props.color"
+          r="2"
+          opacity="0.8"
+        />
+        <circle cx="22" cy="12" :fill="props.color" r="2" />
+        <circle
+          cx="19.071"
+          cy="19.071"
+          :fill="props.color"
+          r="2"
+          opacity="0.4"
+        />
+        <circle cx="12" cy="22" :fill="props.color" r="2" opacity="0.4" />
+        <circle
+          cx="4.929"
+          cy="19.071"
+          :fill="props.color"
+          r="2"
+          opacity="0.4"
+        />
+        <circle cx="2" cy="12" :fill="props.color" r="2" opacity="0.4" />
+        <circle cx="4.929" cy="4.929" :fill="props.color" r="2" opacity="0.4" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-2-24-icon-f {
+  --animation-duration: 0.8s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-dots-2-anim var(--animation-duration) infinite
+    steps(8, start);
+}
+@keyframes nc-loop-dots-2-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/DotsAnim2OutlineIcon.vue

@@ -0,0 +1,126 @@
+<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 2</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-2-24-icon-o">
+        <circle
+          cx="12"
+          cy="3"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          opacity="0.6"
+        />
+        <circle
+          cx="18.364"
+          cy="5.636"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          opacity="0.8"
+        />
+        <circle
+          cx="21"
+          cy="12"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+        />
+        <circle
+          cx="18.364"
+          cy="18.364"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          opacity="0.4"
+        />
+        <circle
+          cx="12"
+          cy="21"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          opacity="0.4"
+        />
+        <circle
+          cx="5.636"
+          cy="18.364"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          opacity="0.4"
+        />
+        <circle
+          cx="3"
+          cy="12"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          opacity="0.4"
+        />
+        <circle
+          cx="5.636"
+          cy="5.636"
+          fill="none"
+          r="2"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          opacity="0.4"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-dots-2-24-icon-o {
+  --animation-duration: 0.8s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-dots-2-anim var(--animation-duration) infinite
+    steps(8, start);
+}
+@keyframes nc-loop-dots-2-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>