dfx-bootstrap-icons v1.1.0

dfx-bootstrap-icons

Straightforward, state-of-the-art Angular icon library.

Build upon the excellence of Bootstrap Icons providing you with over 2,000 icons in a bundle-size friendly way.

• Demo
• Installation
• Version compatibility
• Usage
  • Standalone Components
  • Module
• Configuration
  • Standalone Components
  • Module
  • Configuration parameters
  • Component
  • Component parameters
  • CDN
• Examples
  • Provide imported icons application wide
  • Import all icons (not recommended)

Features

• Server Side Rendering (Angular Universal)
• Accessible
• CDN icon loading
• Standalone Component API

Version compatibility

Installation

• npm

  npm install dfx-bootstrap-icons

• pnpm

  pnpm install dfx-bootstrap-icons

Usage

Standalone Components

import { BiComponent, provideBi, withIcons, exclamationOctagonFill, xCircleFill } from 'dfx-bootstrap-icons';

@Component({
  standalone: true,
  selector: 'app-root',
  template: ` <bi name="exclamation-octagon-fill" /> `,
  imports: [BiComponent],
  providers: [provideBi(withIcons({ exclamationOctagonFill }))],
})
export class AppComponent {}

Module

import { BiModule, withIcons, exclamationOctagonFill } from 'dfx-bootstrap-icons';

@NgModule({
  declaration: [AppComponent],
  imports: [BiModule.setup(withIcons({ exclamationOctagonFill }))],
})
export class AppModule {}

@Component({
  selector: 'app-root',
  template: ` <bi name="exclamation-octagon-fill" /> `,
})
export class AppComponent {}

Configuration

Standalone Components

import { provideBi, BiComponent, withIcons, withWidth, withHeight, withColor, exclamationOctagonFill } from 'dfx-bootstrap-icons';

@Component({
  // ...
  standalone: true,
  imports: [BiComponent],
  providers: [provideBi(withIcons({ exclamationOctagonFill }), withWidth(16), withHeight(16), withColor('currentColor'))],
  template: ` <bi name="exclamation-octagon-fill" /> `,
  // ...
})
export class AppComponent {}

Module

import { BiModule, withIcons, withWidth, withHeight, withColor, exclamationOctagonFill } from 'dfx-bootstrap-icons';

@NgModule({
  declaration: [AppComponent],
  imports: [BiModule.setup(withIcons({ exclamationOctagonFill }), withWidth(16), withHeight(16), withColor('currentColor'))],
})
export class AppModule {}

Configuration parameters

Component

@Component({
  // ...
  selector: 'app-root',
  template: ` <bi name="exclamation-octagon-fill" width="16" height="16" color="currentColor" clearDimensions="false" ariaLabel="Icon" /> `,
  // ...
})
export class AppComponent {}

Parameters

CDN

You are not required to include every used icon in your bundle. Instead, you have the option to utilize a CDN URL, allowing you to load your icons dynamically at runtime, either exclusively or in addition to bundling them.

When providing multiple URLs, dfx-bootstrap-icons is going to pick a single one randomly at app start.

Configure a pool of CDN URLs:

import { provideBi, withCDN } from 'dfx-bootstrap-icons';

bootstrapApplication(AppComponent, {
  providers: [provideBi(withCDN('https://test.url.1', 'https://test.url.2'))],
}).catch((err) => console.error(err));

Examples

Provide imported icons application wide

// icons.ts

import {
  apple,
  // Import more icons
} from 'dfx-bootstrap-icons';

export const ICONS = {
  apple,
  // Import more icons
};

// main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { provideBi, withIcons } from 'dfx-bootstrap-icons';
import { AppComponent } from './app/app.component';
import { ICONS } from './app/icons.ts';

bootstrapApplication(AppComponent, {
  providers: [provideBi(withIcons(ICONS))],
}).catch((err) => console.error(err));

Import all icons (not recommended)

import { provideBi, withIcons, allIcons } from 'dfx-bootstrap-icons';

bootstrapApplication(AppComponent, {
  providers: [provideBi(withIcons(allIcons))],
}).catch((err) => console.error(err));

By Dafnik