@umbra.ui/icons 0.1.0

package/src/animated/RippleAnimOutlineIcon.vue

@@ -0,0 +1,64 @@
+<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>ripple 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-ripple-24-icon-o">
+        <circle cx="12" cy="12" fill="none" r="11" :stroke="props.color" />
+        <circle data-color="color-2" cx="12" cy="12" fill="none" r="11" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-ripple-24-icon-o {
+  --animation-duration: 1.2s;
+}
+.nc-loop-ripple-24-icon-o * {
+  transform-origin: 50% 50%;
+  animation: nc-loop-ripple-anim var(--animation-duration) infinite
+    cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.nc-loop-ripple-24-icon-o :nth-child(2) {
+  animation-delay: calc(var(--animation-duration) / -2);
+}
+@keyframes nc-loop-ripple-anim {
+  0% {
+    opacity: 1;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+</style>

package/src/animated/RotatingBarsAnimGlyphIcon.vue

@@ -0,0 +1,76 @@
+<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>rotating bars anim</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-bars-rotate-24-icon-f">
+        <path d="M18 11h6v2h-6z" :fill="props.color" />
+        <path
+          d="M17.364 15.364h2v6h-2z"
+          :fill="props.color"
+          opacity="0.4"
+          transform="rotate(-45 18.364 18.364)"
+        />
+        <path d="M11 18h2v6h-2z" :fill="props.color" opacity="0.4" />
+        <path
+          d="M2.636 17.364h6v2h-6z"
+          :fill="props.color"
+          opacity="0.4"
+          transform="rotate(-45 5.636 18.365)"
+        />
+        <path d="M0 11h6v2H0z" :fill="props.color" opacity="0.4" />
+        <path
+          d="M4.636 2.636h2v6h-2z"
+          :fill="props.color"
+          opacity="0.4"
+          transform="rotate(-45 5.636 5.637)"
+        />
+        <path d="M11 0h2v6h-2z" :fill="props.color" opacity="0.6" />
+        <path
+          d="M15.364 4.636h6v2h-6z"
+          :fill="props.color"
+          opacity="0.8"
+          transform="rotate(-45 18.364 5.637)"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-bars-rotate-24-icon-f {
+  --animation-duration: 0.8s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-bars-rotate-anim var(--animation-duration) infinite
+    steps(8, start);
+}
+@keyframes nc-loop-bars-rotate-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/RotatingBarsAnimOutlineIcon.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>rotating 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-rotate-24-icon-o">
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="23"
+          x2="19"
+          y1="12"
+          y2="12"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="19.778"
+          x2="16.95"
+          y1="19.778"
+          y2="16.95"
+          opacity="0.4"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="12"
+          x2="12"
+          y1="23"
+          y2="19"
+          opacity="0.4"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="4.222"
+          x2="7.05"
+          y1="19.778"
+          y2="16.95"
+          opacity="0.4"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="1"
+          x2="5"
+          y1="12"
+          y2="12"
+          opacity="0.4"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="4.222"
+          x2="7.05"
+          y1="4.222"
+          y2="7.05"
+          opacity="0.4"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="12"
+          x2="12"
+          y1="1"
+          y2="5"
+          opacity="0.6"
+        />
+        <line
+          fill="none"
+          :stroke="props.color"
+          x1="19.778"
+          x2="16.95"
+          y1="4.222"
+          y2="7.05"
+          opacity="0.8"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-bars-rotate-24-icon-o {
+  --animation-duration: 0.8s;
+  transform-origin: 12px 12px;
+  animation: nc-loop-bars-rotate-anim var(--animation-duration) infinite
+    steps(8, start);
+}
+@keyframes nc-loop-bars-rotate-anim {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/animated/SlideshowAnimGlyphIcon.vue

@@ -0,0 +1,90 @@
+<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>slideshow anim</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-slideshow-anim-24-icon-f">
+        <rect :fill="props.color" height="20" width="8" y="2" x="-8" />
+        <rect :fill="props.color" height="20" width="8" y="2" />
+        <rect :fill="props.color" height="20" width="8" y="2" x="8" />
+        <rect :fill="props.color" height="20" width="8" y="2" x="16" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-slideshow-anim-24-icon-f,
+.nc-loop-slideshow-anim-24-icon-f > * {
+  --animation-duration: 0.8s;
+}
+.nc-loop-slideshow-anim-24-icon-f {
+  transform-origin: 50% 50%;
+  animation: nc-loop-slideshow-anim-24 var(--animation-duration) infinite
+    cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.nc-loop-slideshow-anim-24-icon-f > :nth-child(1) {
+  transform-origin: -4px 12px;
+  transform: scale(0.7);
+}
+.nc-loop-slideshow-anim-24-icon-f > :nth-child(2) {
+  transform-origin: 4px 12px;
+  animation: nc-loop-slideshow-anim-24-scale-up var(--animation-duration)
+    infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.nc-loop-slideshow-anim-24-icon-f > :nth-child(3) {
+  transform-origin: 50% 50%;
+  transform: scale(0.7);
+  animation: nc-loop-slideshow-anim-24-scale-down var(--animation-duration)
+    infinite cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.nc-loop-slideshow-anim-24-icon-f > :nth-child(4) {
+  transform-origin: 20px 12px;
+  transform: scale(0.7);
+}
+@keyframes nc-loop-slideshow-anim-24 {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(8px);
+  }
+}
+@keyframes nc-loop-slideshow-anim-24-scale-down {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.7);
+  }
+}
+@keyframes nc-loop-slideshow-anim-24-scale-up {
+  0% {
+    transform: scale(0.7);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>

package/src/animated/SquaresAnim2GlyphIcon.vue

@@ -0,0 +1,62 @@
+<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>squares anim 2</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-squares-anim-2-icon-f">
+        <rect height="11" rx="1" width="11" data-color="color-2" x="13" />
+        <rect :fill="props.color" height="11" rx="1" width="11" x="13" y="13" />
+        <rect height="11" rx="1" width="11" data-color="color-2" y="13" />
+        <rect :fill="props.color" height="11" rx="1" width="11" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-squares-anim-2-icon-f > * {
+  --animation-duration: 2s;
+  animation: nc-loop-squares-anim-2 var(--animation-duration) infinite;
+}
+.nc-loop-squares-anim-2-icon-f > :nth-child(1) {
+  opacity: 0;
+  animation-delay: calc(-1 * var(--animation-duration) / 2);
+}
+.nc-loop-squares-anim-2-icon-f > :nth-child(2) {
+  opacity: 0.5;
+  animation-delay: calc(-1 * var(--animation-duration) / 4);
+}
+.nc-loop-squares-anim-2-icon-f > :nth-child(4) {
+  animation-delay: calc(var(--animation-duration) / 4);
+}
+@keyframes nc-loop-squares-anim-2 {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+</style>

package/src/animated/SquaresAnim2OutlineIcon.vue

@@ -0,0 +1,101 @@
+<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>squares 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-squares-anim-2-icon-o">
+        <rect
+          fill="none"
+          height="9"
+          stroke-miterlimit="10"
+          width="9"
+          x="14"
+          y="1"
+          data-color="color-2"
+        />
+        <rect
+          fill="none"
+          height="9"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          width="9"
+          x="14"
+          y="14"
+        />
+        <rect
+          fill="none"
+          height="9"
+          stroke-miterlimit="10"
+          width="9"
+          x="1"
+          y="14"
+          data-color="color-2"
+        />
+        <rect
+          fill="none"
+          height="9"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          width="9"
+          x="1"
+          y="1"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-squares-anim-2-icon-o > * {
+  --animation-duration: 2s;
+  animation: nc-loop-squares-anim-2 var(--animation-duration) infinite;
+}
+.nc-loop-squares-anim-2-icon-o > :nth-child(1) {
+  opacity: 0;
+  animation-delay: calc(-1 * var(--animation-duration) / 2);
+}
+.nc-loop-squares-anim-2-icon-o > :nth-child(2) {
+  opacity: 0.5;
+  animation-delay: calc(-1 * var(--animation-duration) / 4);
+}
+.nc-loop-squares-anim-2-icon-o > :nth-child(4) {
+  animation-delay: calc(var(--animation-duration) / 4);
+}
+@keyframes nc-loop-squares-anim-2 {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+</style>

package/src/animated/SquaresAnimGlyphIcon.vue

@@ -0,0 +1,64 @@
+<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>squares anim</title>
+    <g class="nc-icon-wrapper" :fill="props.color">
+      <g class="nc-loop-squares-24-icon-f">
+        <rect height="12" width="12" data-color="color-2" x="12" />
+        <rect :fill="props.color" height="12" width="12" x="12" y="12" />
+        <rect :fill="props.color" height="12" width="12" />
+        <rect height="12" width="12" data-color="color-2" y="12" />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-squares-24-icon-f > * {
+  --animation-duration: 1.3s;
+  transform-origin: 50% 50%;
+  animation: nc-loop-squares-anim var(--animation-duration) infinite;
+}
+.nc-loop-squares-24-icon-f > :nth-child(2) {
+  animation-delay: 0.1s;
+}
+.nc-loop-squares-24-icon-f > :nth-child(3) {
+  animation-delay: 0.2s;
+}
+.nc-loop-squares-24-icon-f > :nth-child(4) {
+  animation-delay: 0.3s;
+}
+@keyframes nc-loop-squares-anim {
+  0%,
+  100%,
+  80% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+</style>

package/src/animated/SquaresAnimOutlineIcon.vue

@@ -0,0 +1,103 @@
+<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>squares 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-squares-24-icon-o">
+        <rect
+          fill="none"
+          height="8"
+          stroke-miterlimit="10"
+          width="8"
+          x="14"
+          y="2"
+          data-color="color-2"
+        />
+        <rect
+          fill="none"
+          height="8"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          width="8"
+          x="14"
+          y="14"
+        />
+        <rect
+          fill="none"
+          height="8"
+          :stroke="props.color"
+          stroke-miterlimit="10"
+          width="8"
+          x="2"
+          y="2"
+        />
+        <rect
+          fill="none"
+          height="8"
+          stroke-miterlimit="10"
+          width="8"
+          x="2"
+          y="14"
+          data-color="color-2"
+        />
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+}
+.nc-loop-squares-24-icon-o > * {
+  --animation-duration: 1.3s;
+  transform-origin: 50% 50%;
+  animation: nc-loop-squares-anim var(--animation-duration) infinite;
+}
+.nc-loop-squares-24-icon-o > :nth-child(2) {
+  animation-delay: 0.1s;
+}
+.nc-loop-squares-24-icon-o > :nth-child(3) {
+  animation-delay: 0.2s;
+}
+.nc-loop-squares-24-icon-o > :nth-child(4) {
+  animation-delay: 0.3s;
+}
+@keyframes nc-loop-squares-anim {
+  0%,
+  100%,
+  80% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+</style>