@choiceform/icons-angular v1.0.0

@choiceform/icons-angular

Angular components for SVG icons.

Installation

npm install @choiceform/icons-angular
# or
yarn add @choiceform/icons-angular
# or
pnpm add @choiceform/icons-angular

Usage

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 {}

Component Props

Each icon component accepts the following inputs:

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>

CSS Class

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));
}

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);