@glamera/animated-icons 0.1.0

package/scan-qr-code/src/scan-qr-code.animation.scss

@@ -0,0 +1,123 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-scan-qr-code-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+@keyframes glm-scan-qr-code-bit {
+  0%,
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  50% {
+    transform: translateY(2px);
+    opacity: 0.4;
+  }
+}
+
+@keyframes glm-scan-qr-code-core {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.85);
+  }
+}
+
+.glm-icon[data-icon='scan-qr-code'] .glm-scan-qr-code-group {
+  transform-box: view-box;
+  transform-origin: 12px 12px;
+}
+
+.glm-icon[data-icon='scan-qr-code'] .glm-scan-qr-code-bit,
+.glm-icon[data-icon='scan-qr-code'] .glm-scan-qr-code-core {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('scan-qr-code') {
+  .glm-scan-qr-code-group {
+    animation: glm-scan-qr-code-pulse calc(var(--glm-duration) * 0.4) ease-out var(--glm-delay) both;
+  }
+
+  .glm-scan-qr-code-core {
+    animation: glm-scan-qr-code-core calc(var(--glm-duration) * 0.3) ease-out var(--glm-delay) both;
+  }
+
+  .glm-scan-qr-code-bit-0 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0) both;
+  }
+
+  .glm-scan-qr-code-bit-1 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.05) both;
+  }
+
+  .glm-scan-qr-code-bit-2 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.1) both;
+  }
+
+  .glm-scan-qr-code-bit-3 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.15) both;
+  }
+
+  .glm-scan-qr-code-bit-4 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.2) both;
+  }
+
+  .glm-scan-qr-code-bit-5 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.25) both;
+  }
+
+  .glm-scan-qr-code-bit-6 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.3) both;
+  }
+}
+
+@include glm-loop('scan-qr-code') {
+  .glm-scan-qr-code-group {
+    animation: glm-scan-qr-code-pulse calc(var(--glm-duration) * 0.8) ease-out var(--glm-delay) infinite both;
+  }
+
+  .glm-scan-qr-code-core {
+    animation: glm-scan-qr-code-core calc(var(--glm-duration) * 0.6) ease-out var(--glm-delay) infinite both;
+  }
+
+  .glm-scan-qr-code-bit-0 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.7) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0) infinite both;
+  }
+
+  .glm-scan-qr-code-bit-1 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.7) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.05) infinite both;
+  }
+
+  .glm-scan-qr-code-bit-2 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.7) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.1) infinite both;
+  }
+
+  .glm-scan-qr-code-bit-3 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.7) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.15) infinite both;
+  }
+
+  .glm-scan-qr-code-bit-4 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.7) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.2) infinite both;
+  }
+
+  .glm-scan-qr-code-bit-5 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.7) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.25) infinite both;
+  }
+
+  .glm-scan-qr-code-bit-6 {
+    animation: glm-scan-qr-code-bit calc(var(--glm-duration) * 0.7) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.3) infinite both;
+  }
+}

package/scan-text/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/scan-text" />
+export * from './public-api';

package/scan-text/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_SCAN_TEXT, ScanTextIconComponent, ScanTextIconComponent as ScanTextIcon, } from './scan-text';

package/scan-text/scan-text.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_SCAN_TEXT: GlameraIconDefinition;
+export declare class ScanTextIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScanTextIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ScanTextIconComponent, "glamera-scan-text-icon", never, {}, {}, never, never, true, never>;
+}

package/scan-text/src/scan-text.animation.scss

@@ -0,0 +1,59 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-scan-text-line-scan {
+  0% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+
+  50% {
+    stroke-dashoffset: 12;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='scan-text'] .glm-icon-svg svg {
+  overflow: visible;
+}
+
+.glm-icon[data-icon='scan-text'] .glm-scan-text-line {
+  stroke-dasharray: 12;
+  stroke-dashoffset: 0;
+  opacity: 1;
+  transition:
+    stroke-dashoffset calc(var(--glm-duration) * 0.3) ease,
+    opacity calc(var(--glm-duration) * 0.3) ease;
+}
+
+@include glm-when-playing('scan-text') {
+  .glm-scan-text-line-0 {
+    animation: glm-scan-text-line-scan calc(var(--glm-duration) * 0.6) ease var(--glm-delay) forwards;
+  }
+
+  .glm-scan-text-line-1 {
+    animation: glm-scan-text-line-scan calc(var(--glm-duration) * 0.6) ease calc(var(--glm-delay) + var(--glm-duration) * 0.1) forwards;
+  }
+
+  .glm-scan-text-line-2 {
+    animation: glm-scan-text-line-scan calc(var(--glm-duration) * 0.6) ease calc(var(--glm-delay) + var(--glm-duration) * 0.2) forwards;
+  }
+}
+
+@include glm-loop('scan-text') {
+  .glm-scan-text-line-0 {
+    animation: glm-scan-text-line-scan calc(var(--glm-duration) * 0.6) ease var(--glm-delay) infinite;
+  }
+
+  .glm-scan-text-line-1 {
+    animation: glm-scan-text-line-scan calc(var(--glm-duration) * 0.6) ease calc(var(--glm-delay) + var(--glm-duration) * 0.1) infinite;
+  }
+
+  .glm-scan-text-line-2 {
+    animation: glm-scan-text-line-scan calc(var(--glm-duration) * 0.6) ease calc(var(--glm-delay) + var(--glm-duration) * 0.2) infinite;
+  }
+}

package/search/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/search" />
+export * from './public-api';

package/search/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_SEARCH, SearchIconComponent, SearchIconComponent as SearchIcon } from './search';

package/search/search.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_SEARCH: GlameraIconDefinition;
+export declare class SearchIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchIconComponent, "glamera-search-icon", never, {}, {}, never, never, true, never>;
+}

package/search/src/search.animation.scss

@@ -0,0 +1,36 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-search-scan {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(2px, -1px) rotate(6deg);
+  }
+  50% {
+    transform: translate(-2px, 2px) rotate(-6deg);
+  }
+  75% {
+    transform: translate(1px, -1px) rotate(4deg);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+}
+
+.glm-icon[data-icon='search'] .glm-search-group {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+@include glm-when-playing('search') {
+  .glm-search-group {
+    animation: glm-search-scan calc(var(--glm-duration) * 1.2) ease-in-out var(--glm-delay);
+  }
+}
+
+@include glm-loop('search') {
+  .glm-search-group {
+    animation-iteration-count: infinite;
+  }
+}

package/settings/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/settings" />
+export * from './public-api';

package/settings/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_SETTINGS, SettingsIconComponent, SettingsIconComponent as SettingsIcon } from './settings';

package/settings/settings.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_SETTINGS: GlameraIconDefinition;
+export declare class SettingsIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SettingsIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SettingsIconComponent, "glamera-settings-icon", never, {}, {}, never, never, true, never>;
+}

package/settings/src/settings.animation.scss

@@ -0,0 +1,34 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-gear-turn {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes glm-gear-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.glm-icon[data-icon='settings'] .glm-settings-gear {
+  transform-box: view-box;
+  transform-origin: 12px 12px;
+}
+
+.glm-icon[data-icon='settings'].glm-anim-hover:hover .glm-settings-gear,
+.glm-icon[data-icon='settings'].glm-anim-hover.glm-parent-hover .glm-settings-gear,
+.glm-icon[data-icon='settings'].glm-anim-click.glm-is-active .glm-settings-gear {
+  animation: glm-gear-turn var(--glm-duration) ease-in-out var(--glm-delay) both;
+}
+
+.glm-icon[data-icon='settings'].glm-anim-loop .glm-settings-gear {
+  animation: glm-gear-spin var(--glm-duration) linear var(--glm-delay) infinite;
+}

package/share/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/share" />
+export * from './public-api';

package/share/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_SHARE, ShareIconComponent, ShareIconComponent as ShareIcon, } from './share';

package/share/share.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_SHARE: GlameraIconDefinition;
+export declare class ShareIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ShareIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ShareIconComponent, "glamera-share-icon", never, {}, {}, never, never, true, never>;
+}

package/share/src/share.animation.scss

@@ -0,0 +1,116 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-share-node-pop {
+  0% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+
+  60% {
+    transform: scale(1.25);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-share-node-pop-loop {
+  0%,
+  100% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+
+  24% {
+    transform: scale(1.25);
+    opacity: 1;
+  }
+
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes glm-share-line-draw {
+  0% {
+    stroke-dashoffset: 9;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-share-line-draw-loop {
+  0%,
+  100% {
+    stroke-dashoffset: 9;
+    opacity: 0;
+  }
+
+  35%,
+  50% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='share'] .glm-share-node {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon[data-icon='share'] .glm-share-line {
+  stroke-dasharray: 9;
+  stroke-dashoffset: 0;
+  opacity: 1;
+}
+
+@include glm-when-playing('share') {
+  .glm-share-node-left {
+    animation: glm-share-node-pop calc(var(--glm-duration) * 0.4) cubic-bezier(0.22, 1, 0.36, 1) var(--glm-delay) both;
+  }
+
+  .glm-share-line-top,
+  .glm-share-line-bottom {
+    animation: glm-share-line-draw calc(var(--glm-duration) * 0.35) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.18) both;
+  }
+
+  .glm-share-node-top {
+    animation: glm-share-node-pop calc(var(--glm-duration) * 0.4) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--glm-delay) + var(--glm-duration) * 0.42) both;
+  }
+
+  .glm-share-node-bottom {
+    animation: glm-share-node-pop calc(var(--glm-duration) * 0.4) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--glm-delay) + var(--glm-duration) * 0.48) both;
+  }
+}
+
+@include glm-loop('share') {
+  .glm-share-node-left {
+    animation: glm-share-node-pop-loop calc(var(--glm-duration) * 1.8) cubic-bezier(0.22, 1, 0.36, 1) var(--glm-delay) infinite both;
+  }
+
+  .glm-share-line-top,
+  .glm-share-line-bottom {
+    animation: glm-share-line-draw-loop calc(var(--glm-duration) * 1.8) ease-out calc(var(--glm-delay) + var(--glm-duration) * 0.18) infinite both;
+  }
+
+  .glm-share-node-top {
+    animation: glm-share-node-pop-loop calc(var(--glm-duration) * 1.8) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--glm-delay) + var(--glm-duration) * 0.42) infinite both;
+  }
+
+  .glm-share-node-bottom {
+    animation: glm-share-node-pop-loop calc(var(--glm-duration) * 1.8) cubic-bezier(0.22, 1, 0.36, 1) calc(var(--glm-delay) + var(--glm-duration) * 0.48) infinite both;
+  }
+}

package/square-check-big/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/square-check-big" />
+export * from './public-api';

package/square-check-big/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_SQUARE_CHECK_BIG, SquareCheckBigIconComponent, SquareCheckBigIconComponent as SquareCheckBigIcon, } from './square-check-big';

package/square-check-big/square-check-big.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_SQUARE_CHECK_BIG: GlameraIconDefinition;
+export declare class SquareCheckBigIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SquareCheckBigIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SquareCheckBigIconComponent, "glamera-square-check-big-icon", never, {}, {}, never, never, true, never>;
+}

package/square-check-big/src/square-check-big.animation.scss

@@ -0,0 +1,53 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-square-check-big-check {
+  0%,
+  33% {
+    stroke-dashoffset: 17;
+    opacity: 0;
+  }
+
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes glm-square-check-big-check-loop {
+  0%,
+  33% {
+    stroke-dashoffset: 17;
+    opacity: 0;
+  }
+
+  66%,
+  100% {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+.glm-icon[data-icon='square-check-big'] .glm-icon-svg svg {
+  overflow: visible;
+}
+
+.glm-icon[data-icon='square-check-big'] .glm-square-check-big-check {
+  stroke-dasharray: 17;
+  stroke-dashoffset: 0;
+  opacity: 1;
+  transition:
+    stroke-dashoffset calc(var(--glm-duration) * 0.125) ease-out,
+    opacity calc(var(--glm-duration) * 0.125) ease-out;
+}
+
+@include glm-when-playing('square-check-big') {
+  .glm-square-check-big-check {
+    animation: glm-square-check-big-check calc(var(--glm-duration) * 0.5) ease-out var(--glm-delay) backwards;
+  }
+}
+
+@include glm-loop('square-check-big') {
+  .glm-square-check-big-check {
+    animation: glm-square-check-big-check-loop calc(var(--glm-duration) * 1.2) ease-out var(--glm-delay) infinite backwards;
+  }
+}

package/square-pen/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@glamera/animated-icons/square-pen" />
+export * from './public-api';

package/square-pen/public-api.d.ts

@@ -0,0 +1 @@
+export { GLM_SQUARE_PEN, SquarePenIconComponent, SquarePenIconComponent as SquarePenIcon, } from './square-pen';

package/square-pen/square-pen.d.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { GlameraIconBase, GlameraIconDefinition } from '@glamera/animated-icons';
+import * as i0 from "@angular/core";
+export declare const GLM_SQUARE_PEN: GlameraIconDefinition;
+export declare class SquarePenIconComponent extends GlameraIconBase {
+    readonly iconDef: GlameraIconDefinition;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SquarePenIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SquarePenIconComponent, "glamera-square-pen-icon", never, {}, {}, never, never, true, never>;
+}

package/square-pen/src/square-pen.animation.scss

@@ -0,0 +1,33 @@
+@import '../../src/lib/animations/play';
+
+@keyframes glm-square-pen-wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg) translate(0, 0);
+  }
+
+  25% {
+    transform: rotate(-0.5deg) translate(-1px, 1.5px);
+  }
+
+  75% {
+    transform: rotate(0.5deg) translate(1.5px, -1px);
+  }
+}
+
+.glm-icon[data-icon='square-pen'] .glm-square-pen-pen {
+  transform-box: view-box;
+  transform-origin: 19.875px 4.125px;
+}
+
+@include glm-when-playing('square-pen') {
+  .glm-square-pen-pen {
+    animation: glm-square-pen-wiggle calc(var(--glm-duration) * 0.5) ease-in-out var(--glm-delay) 2 both;
+  }
+}
+
+@include glm-loop('square-pen') {
+  .glm-square-pen-pen {
+    animation: glm-square-pen-wiggle calc(var(--glm-duration) * 0.5) ease-in-out var(--glm-delay) infinite both;
+  }
+}

package/src/lib/animations/_play.scss

@@ -0,0 +1,18 @@
+@mixin glm-when-playing($icon) {
+  .glm-icon[data-icon='#{$icon}'].glm-anim-hover:hover,
+  .glm-icon[data-icon='#{$icon}'].glm-anim-hover.glm-parent-hover,
+  .glm-icon[data-icon='#{$icon}'].glm-anim-hover-loop:hover,
+  .glm-icon[data-icon='#{$icon}'].glm-anim-hover-loop.glm-parent-hover,
+  .glm-icon[data-icon='#{$icon}'].glm-anim-loop,
+  .glm-icon[data-icon='#{$icon}'].glm-anim-click.glm-is-active {
+    @content;
+  }
+}
+
+@mixin glm-loop($icon) {
+  .glm-icon[data-icon='#{$icon}'].glm-anim-hover-loop:hover,
+  .glm-icon[data-icon='#{$icon}'].glm-anim-hover-loop.glm-parent-hover,
+  .glm-icon[data-icon='#{$icon}'].glm-anim-loop {
+    @content;
+  }
+}

package/src/lib/base/icon-base.scss

@@ -0,0 +1,40 @@
+.glm-icon {
+  --glm-duration: 1000ms;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  line-height: 0;
+  vertical-align: middle;
+  flex-shrink: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.glm-icon-svg,
+.glm-icon-svg svg {
+  display: block;
+  width: var(--glm-size, 24px);
+  height: var(--glm-size, 24px);
+  overflow: visible;
+}
+
+.glm-icon-svg svg,
+.glm-icon-svg svg * {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.glm-icon.glm-anim-hover:hover .glm-icon-svg *,
+.glm-icon.glm-anim-hover.glm-parent-hover .glm-icon-svg * {
+  animation-iteration-count: 1 !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glm-icon.glm-anim-hover:hover .glm-icon-svg *,
+  .glm-icon.glm-anim-hover-loop:hover .glm-icon-svg *,
+  .glm-icon.glm-anim-hover-loop.glm-parent-hover .glm-icon-svg *,
+  .glm-icon.glm-anim-loop .glm-icon-svg *,
+  .glm-icon.glm-anim-click.glm-is-active .glm-icon-svg * {
+    animation: none !important;
+  }
+}

package/styles/3-dots-horizontal.scss

@@ -0,0 +1 @@
+@import '../3-dots-horizontal/src/3-dots-horizontal.animation';

package/styles/3-dots-vertical.scss

@@ -0,0 +1 @@
+@import '../3-dots-vertical/src/3-dots-vertical.animation';