Glamera Animated Icons

Angular icon library for Glamera. The publishable package is @glamera/animated-icons.

The workspace is a standalone Angular 15 application. The library is compiled with Ivy partial compilation and exposes standalone components, so it works from Angular 15 upward.

Requirements

This workspace uses Angular CLI 15, so local development needs Node 18 (or 16 / 14 as listed in package.json). Consuming applications can use the Node version required by their own Angular major.

npm install
npm start

Demo: http://localhost:4200

Scripts

| Script | Purpose | | --- | --- | | npm start | Serve the demo website | | npm test | Unit tests for the library | | npm run build | Build the npm package into dist/animated-icons | | npm run pack | Build, then create an installable tarball | | npm run build:demo | Production build of the demo app |

Package API

npm install @glamera/animated-icons

import { bootstrapApplication } from '@angular/platform-browser';
import { provideGlameraIcons, GlameraIconComponent } from '@glamera/animated-icons';
import { SearchIconComponent, GLM_SEARCH } from '@glamera/animated-icons/search';

bootstrapApplication(AppComponent, {
  providers: [provideGlameraIcons([GLM_SEARCH])],
});

@Component({
  standalone: true,
  imports: [GlameraIconComponent, SearchIconComponent],
  template: `
    <glamera-icon name="search" animation="hover" size="24"></glamera-icon>
    <glamera-search-icon animation="loop" [size]="32" aria-label="Search"></glamera-search-icon>
  `,
})
export class FeatureComponent {}

Icons use currentColor. Import only the icon entry points you need so unused icons are not bundled.

See projects/animated-icons/README.md for the full API, accessibility notes, and how to add a new icon.

Layout

projects/animated-icons/     Publishable library
  src/lib/components/        Unified <glamera-icon>
  src/lib/animations/        Shared mixins + unified stylesheet
  search|heart|bell|...      Secondary entry points
src/app/                     Standalone demo app
  app.config.ts
  demo/