New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

dfx-bootstrap-icons

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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.


Version published
Weekly downloads
181
decreased by-30.65%
Maintainers
0
Weekly downloads
 
Created

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.

npm version npm downloads per week npm bundle size

Features

  • Server Side Rendering (Angular Universal)
  • zone-less support
  • Accessible
  • CDN icon loading
  • Standalone Component API

Version compatibility

Angulardfx-bootstrap-icons
19.x.x3.x.x
18.x.x2.x.x
17.x.x1.x.x

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, xCircleFill }))],
})
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

NameTypeDescriptionExampleDefault value
withIcons{ [key: string]: string }Icons you want to include in your bundle.withIcons({ exclamationOctagonFill, xCircleFill })
withCDN...string[]Bootstrap Icons CDN URLs.withCDN('https://playground.dafnik.me/bootstrap-icons/icons')
withSizestringSize of the icon. (overrides injected width and height)withSize('24')undefined
withWidthstringWidth of the icon.withWidth('24')16
withHeightstringHeight of the icon.withHeight('24')16
withColorstringColor of the icon.withColor('#0000FF')currentColor

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

NameTypeDescriptionDefault valueRequired
nameBiName | BiNamesEnumName of the icon.X
sizestringSize of the icon. (overrides passed width and height)
widthstringWidth of the icon.
heightstringHeight of the icon.
colorstringColor of the icon.
clearDimensionsbooleanClears dimensions (width, height) set via params or injection.false
ariaLabelstringaria-label which is set on the icon.

Width, height and size??

BiComponent picks the size for the icon in the following order based on which params you inject and pass.

const width = Input_Size ?? Input_Width ?? Injected_Size ?? Injected_Width;
const height = Input_Size ?? Input_Height ?? Injected_Size ?? Injected_Height;

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://playground.dafnik.me/bootstrap-icons/icons'))],
}).catch((err) => console.error(err));

Don't forget to add the HttpClient and biCacheInterceptor

HttpClient Interceptor

When using CDNs you can use the biCacheInterceptor to prevent the duplicate fetching of icons.

import { biCacheInterceptor } from 'dfx-bootstrap-icons';
import { provideHttpClient, withInterceptors } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient(withInterceptors([biCacheInterceptor]))],
}).catch((err) => console.error(err));
Using your assets folder as the CDN

You can bundle all icons into your assets folder so they will be included in your bundle but not get loaded unless you use actually them.

// main.ts

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

bootstrapApplication(AppComponent, {
  providers: [provideBi(withCDN('/assets/bootstrap-icons'))],
}).catch((err) => console.error(err));
// angular.json, project.json or nx.json

{
  "options": {
    "assets": [
      {
        "glob": "*",
        "input": "node_modules/dfx-bootstrap-icons/icons",
        "output": "/assets/bootstrap-icons"
      }
    ]
  }
}

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 { provideBi, withIcons, allIcons } from 'dfx-bootstrap-icons';

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

By Dafnik

FAQs

Package last updated on 04 Feb 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts