@umbra.ui/icons 0.1.0 → 0.1.2

package/dist/animated/BarsAnim2GlyphIcon.vue

@@ -0,0 +1,106 @@
+<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>bars anim 2</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-bars-2-24-icon-f">
+        <g>
+          <rect height="24" width="24" opacity="0" />
+          <rect height="5" width="4" :fill="props.color" x="1" y="16" />
+        </g>
+        <g>
+          <rect height="24" width="24" opacity="0" />
+          <rect height="5" width="4" x="7" y="16" data-color="color-2" />
+        </g>
+        <g>
+          <rect height="24" width="24" opacity="0" />
+          <rect height="5" width="4" :fill="props.color" x="13" y="16" />
+        </g>
+        <g>
+          <rect height="24" width="24" opacity="0" />
+          <rect height="5" width="4" x="19" y="16" data-color="color-2" />
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-bars-2-24-icon-f {
+  --animation-duration: 1.4s;
+}
+.nc-loop-bars-2-24-icon-f * {
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
+.nc-loop-bars-2-24-icon-f > * {
+  animation: nc-loop-bars-2-24-anim-1 var(--animation-duration) infinite
+    cubic-bezier(0.19, 1, 0.22, 1);
+}
+.nc-loop-bars-2-24-icon-f > :nth-child(1),
+.nc-loop-bars-2-24-icon-f > :nth-child(1) rect {
+  animation-delay: calc(var(--animation-duration) / 6.22);
+}
+.nc-loop-bars-2-24-icon-f > :nth-child(2),
+.nc-loop-bars-2-24-icon-f > :nth-child(2) rect {
+  animation-delay: calc(var(--animation-duration) / 9.33);
+}
+.nc-loop-bars-2-24-icon-f > :nth-child(3),
+.nc-loop-bars-2-24-icon-f > :nth-child(3) rect {
+  animation-delay: calc(var(--animation-duration) / 18.66);
+}
+.nc-loop-bars-2-24-icon-f > * rect {
+  animation: nc-loop-bars-2-24-anim-2 var(--animation-duration) infinite
+    cubic-bezier(0.19, 1, 0.22, 1);
+}
+@keyframes nc-loop-bars-2-24-anim-1 {
+  0%,
+  100%,
+  90% {
+    transform: translateY(0);
+  }
+  40%,
+  50% {
+    transform: translateY(-13px);
+  }
+}
+@keyframes nc-loop-bars-2-24-anim-2 {
+  0%,
+  40%,
+  50% {
+    transform-origin: 24px 16px;
+    transform: scaleY(1);
+  }
+  100%,
+  51%,
+  90% {
+    transform-origin: 24px 21px;
+    transform: scaleY(1);
+  }
+  20%,
+  70% {
+    transform: scaleY(2.5);
+  }
+}
+</style>

package/dist/animated/BarsAnim3GlyphIcon.vue

@@ -0,0 +1,106 @@
+<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>bars anim 3</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-bars-anim-3-icon-f">
+        <path
+          d="M22,14H2a2,2,0,0,1,0-4H22a2,2,0,0,1,0,4Z"
+          :fill="props.color"
+        />
+        <path
+          d="M22,14H2a2,2,0,0,1,0-4H22a2,2,0,0,1,0,4Z"
+          opacity="0.7"
+          data-color="color-2"
+        />
+        <path
+          d="M22,14H2a2,2,0,0,1,0-4H22a2,2,0,0,1,0,4Z"
+          :fill="props.color"
+          opacity="0.4"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-bars-anim-3-icon-f,
+.nc-loop-bars-anim-3-icon-f > * {
+  --animation-duration: 1.5s;
+  transform-origin: 50% 50%;
+}
+.nc-loop-bars-anim-3-icon-f {
+  animation: nc-loop-bars-anim-3 var(--animation-duration) infinite
+    cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+.nc-loop-bars-anim-3-icon-f > :nth-child(1) {
+  animation: nc-loop-bars-anim-3-sub-1 var(--animation-duration) infinite linear;
+}
+.nc-loop-bars-anim-3-icon-f > :nth-child(2) {
+  animation: nc-loop-bars-anim-3-sub-2 var(--animation-duration) infinite linear;
+}
+.nc-loop-bars-anim-3-icon-f > :nth-child(3) {
+  animation: nc-loop-bars-anim-3-sub-3 var(--animation-duration) infinite linear;
+}
+@keyframes nc-loop-bars-anim-3 {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(420deg);
+  }
+}
+@keyframes nc-loop-bars-anim-3-sub-1 {
+  0%,
+  10% {
+    transform: rotate(0);
+  }
+  100%,
+  30% {
+    transform: rotate(120deg);
+  }
+}
+@keyframes nc-loop-bars-anim-3-sub-2 {
+  0%,
+  10% {
+    transform: rotate(0);
+  }
+  30%,
+  70% {
+    transform: rotate(60deg);
+  }
+  100% {
+    transform: rotate(120deg);
+  }
+}
+@keyframes nc-loop-bars-anim-3-sub-3 {
+  0%,
+  70% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(120deg);
+  }
+}
+</style>

package/dist/animated/BarsAnim3OutlineIcon.vue

@@ -0,0 +1,128 @@
+<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>bars 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-bars-anim-3-icon-o">
+        <line
+          fill="none"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          x1="22"
+          x2="2"
+          y1="12"
+          y2="12"
+        />
+        <line
+          fill="none"
+          stroke-miterlimit="10"
+          x1="22"
+          x2="2"
+          y1="12"
+          y2="12"
+          opacity="0.7"
+          data-color="color-2"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          x1="22"
+          x2="2"
+          y1="12"
+          y2="12"
+          opacity="0.4"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-bars-anim-3-icon-o,
+.nc-loop-bars-anim-3-icon-o > * {
+  --animation-duration: 1.5s;
+  transform-origin: 50% 50%;
+}
+.nc-loop-bars-anim-3-icon-o {
+  animation: nc-loop-bars-anim-3 var(--animation-duration) infinite
+    cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+.nc-loop-bars-anim-3-icon-o > :nth-child(1) {
+  animation: nc-loop-bars-anim-3-sub-1 var(--animation-duration) infinite linear;
+}
+.nc-loop-bars-anim-3-icon-o > :nth-child(2) {
+  animation: nc-loop-bars-anim-3-sub-2 var(--animation-duration) infinite linear;
+}
+.nc-loop-bars-anim-3-icon-o > :nth-child(3) {
+  animation: nc-loop-bars-anim-3-sub-3 var(--animation-duration) infinite linear;
+}
+@keyframes nc-loop-bars-anim-3 {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(420deg);
+  }
+}
+@keyframes nc-loop-bars-anim-3-sub-1 {
+  0%,
+  10% {
+    transform: rotate(0);
+  }
+  100%,
+  30% {
+    transform: rotate(120deg);
+  }
+}
+@keyframes nc-loop-bars-anim-3-sub-2 {
+  0%,
+  10% {
+    transform: rotate(0);
+  }
+  30%,
+  70% {
+    transform: rotate(60deg);
+  }
+  100% {
+    transform: rotate(120deg);
+  }
+}
+@keyframes nc-loop-bars-anim-3-sub-3 {
+  0%,
+  70% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(120deg);
+  }
+}
+</style>

package/dist/animated/BarsAnimGlyphIcon.vue

@@ -0,0 +1,63 @@
+<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>bars anim</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-bars-24-icon-f">
+        <path d="M0 4h4v16H0z" :fill="props.color" />
+        <path d="M10 4h4v16h-4z" data-color="color-2" />
+        <path d="M20 4h4v16h-4z" :fill="props.color" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-bars-24-icon-f * {
+  --animation-duration: 0.8s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-bars-anim var(--animation-duration) infinite;
+}
+.nc-loop-bars-24-icon-f :nth-child(2) {
+  opacity: 1;
+  transform: scaleY(1);
+}
+.nc-loop-bars-24-icon-f :nth-child(1),
+.nc-loop-bars-24-icon-f :nth-child(3) {
+  opacity: 0.3;
+  transform: scaleY(0.5);
+  animation-delay: calc(var(--animation-duration) / -2);
+}
+@keyframes nc-loop-bars-anim {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  50% {
+    opacity: 0.3;
+    transform: scaleY(0.5);
+  }
+}
+</style>

package/dist/animated/BarsAnimOutlineIcon.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>bars 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-bars-24-icon-o">
+        <path d="M2 5v14" fill="none" :stroke="props.color" />
+        <path d="M12 5v14" fill="none" data-color="color-2" />
+        <path d="M22 5v14" fill="none" :stroke="props.color" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-bars-24-icon-o * {
+  --animation-duration: 0.8s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-bars-anim var(--animation-duration) infinite;
+}
+.nc-loop-bars-24-icon-o :nth-child(2) {
+  opacity: 1;
+  transform: scaleY(1);
+}
+.nc-loop-bars-24-icon-o :nth-child(1),
+.nc-loop-bars-24-icon-o :nth-child(3) {
+  opacity: 0.3;
+  transform: scaleY(0.5);
+  animation-delay: calc(var(--animation-duration) / -2);
+}
+@keyframes nc-loop-bars-anim {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  50% {
+    opacity: 0.3;
+    transform: scaleY(0.5);
+  }
+}
+</style>

package/dist/animated/CircleAnim2GlyphIcon.vue

@@ -0,0 +1,57 @@
+<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 2</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-circle-2-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-2-24-icon-f {
+  --animation-duration: 0.65s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-circle-2-anim var(--animation-duration) infinite
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+@keyframes nc-loop-circle-2-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/animated/CircleAnim2OutlineIcon.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>circle 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-circle-2-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-2-24-icon-o {
+  --animation-duration: 0.65s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-circle-2-anim var(--animation-duration) infinite
+    cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+@keyframes nc-loop-circle-2-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/animated/CircleAnim32GlyphIcon.vue

@@ -0,0 +1,51 @@
+<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 2</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-circle-3-24-icon-f">
+        <path
+          d="M12 24a12 12 0 1 1 12-12 1 1 0 0 1-2 0 10 10 0 1 0-1.818 5.751 1 1 0 0 1 1.636 1.15A12.022 12.022 0 0 1 12 24z"
+          :fill="props.color"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-circle-3-24-icon-f {
+  --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/dist/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>