@choiceform/icons-angular

Angular components for SVG icons.

Installation

# npm
npm install @choiceform/icons-angular

# pnpm
pnpm add @choiceform/icons-angular

# yarn
yarn add @choiceform/icons-angular

How to use

Choiceform Icons for Angular is built with ES Modules and is fully tree-shakable.

Import Module (Angular 15+)

import { IconsModule } from "@choiceform/icons-angular";

@NgModule({
  imports: [
    IconsModule,
    // ... other modules
  ],
})
export class AppModule {}

Import Standalone Components (Angular 16+)

import { Component } from "@angular/core";
import {
  WorkspaceComponent,
  FileUploadComponent,
} from "@choiceform/icons-angular";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [WorkspaceComponent, FileUploadComponent],
  template: `
    <cf-workspace></cf-workspace>
    <cf-file-upload
      [width]="32"
      [height]="32"
      [color]="'#1976d2'"
    ></cf-file-upload>
  `,
})
export class ExampleComponent {}

Props

Each icon component accepts the following inputs:

| Input | Type | Default | Description | | -------- | ------------------ | ---------------- | ----------------------------------------------- | | width | string \| number | '16' | Width of the icon | | height | string \| number | '16' | Height of the icon | | color | string | 'currentColor' | Color of the icon | | title | string | undefined | Accessibility title (sets aria-hidden to false) |

Component Selectors

All components use the prefix cf- followed by the kebab-case version of the icon name.

Examples:

• <cf-workspace>
• <cf-file-upload>
• <cf-workspace-template-add>

Styling with CSS

Each icon SVG element has the CSS class choiceform-icon applied by default. This can be customized by modifying the icon-config.json file in the project root:

{
  "iconClassName": "choiceform-icon"
}

This allows for easy global styling of all icons using CSS:

.choiceform-icon {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

Using Icon Metadata

You can access metadata for all the icons:

import { iconMetadata } from "@choiceform/icons-angular";

// iconMetadata is an array of objects with icon information
console.log(iconMetadata);

Features

• Tree Shakable: Only include the icons you use
• TypeScript Support: Full TypeScript definitions for all components
• Accessible: All icons have proper ARIA attributes
• Customizable: Style icons with CSS or component inputs
• Optimized SVGs: All icons are optimized with SVGO
• Angular Compatibility: Works with Angular 15+ and standalone components

Metadata Properties

Each icon in the metadata includes:

| Property | Description | | ---------- | ---------------------------------- | | name | The name of the icon | | category | The category the icon belongs to | | tags | Array of tags for search/filtering | | filename | Original SVG filename | | width | Width of the SVG (if available) | | height | Height of the SVG (if available) |