Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avmaisak/ngx-bootstrap-icons
This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.
https://github.com/avmaisak/ngx-bootstrap-icons
angular angular-library bootstrap bootstrap-icons components icons icons-library icons-pack iconset library ngx-bootstrap-icons svg twbs twbs-icons ui
Last synced: 3 months ago
JSON representation
This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.
- Host: GitHub
- URL: https://github.com/avmaisak/ngx-bootstrap-icons
- Owner: avmaisak
- License: mit
- Created: 2019-11-27T17:49:52.000Z (almost 5 years ago)
- Default Branch: develop
- Last Pushed: 2024-03-18T22:41:27.000Z (8 months ago)
- Last Synced: 2024-07-19T00:14:57.212Z (4 months ago)
- Topics: angular, angular-library, bootstrap, bootstrap-icons, components, icons, icons-library, icons-pack, iconset, library, ngx-bootstrap-icons, svg, twbs, twbs-icons, ui
- Language: TypeScript
- Homepage: https://avmaisak.github.io/ngx-bootstrap-icons
- Size: 14.4 MB
- Stars: 33
- Watchers: 1
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-bootstrap-icons - This Angular module allows you to use the Bootstrap Icons in your Angular application without additional dependencies. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-bootstrap-icons - This Angular module allows you to use the Bootstrap Icons in your Angular application without additional dependencies. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-bootstrap-icons - This Angular module allows you to use the Bootstrap Icons in your Angular application without additional dependencies. (Table of contents / Third Party Components)
README
ngx-bootstrap-icons
### This Angular module allows you to use the Bootstrap Icons in your angular application without additional dependencies.
[](https://github.com/avmaisak/ngx-bootstrap-icons/issues)
[](https://github.com/avmaisak/ngx-bootstrap-icons/blob/master/LICENSE)
[](https://github.com/avmaisak/ngx-bootstrap-icons/stargazers)
[](https://badge.fury.io/js/ngx-bootstrap-icons)
[](https://packagequality.com/#?package=ngx-bootstrap-icons)
```sh
npm i ngx-bootstrap-icons --save
```
### Demo
### Usage
#### _1. Install the package_
```sh
npm i ngx-bootstrap-icons --save
```
#### _2. Import module_
```ts
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';
```
#### _3. Import assets_
You can import all icons (not recomended) or each icon individually.
##### _3.1 Import all icons_
```ts
import { allIcons } from 'ngx-bootstrap-icons';
```
##### _3.2 Import some icons_
```ts
import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';
// Select some icons (use an object, not an array)
const icons = {
alarm,
alarmFill,
alignBottom
};
```
#### _4. Import Module (all icons)_
```ts
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxBootstrapIconsModule.pick(allIcons)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
##### _4.1. Import Module (some icons)_
```ts
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons';
import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';
// Select some icons (use an object, not an array)
const icons = {
alarm,
alarmFill,
alignBottom
};
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxBootstrapIconsModule.pick(icons)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
/**
Another way.
--------------
Import NgxBootstrapIconsModule.pick(icons) inside of the AppModule
Import NgxBootstrapIconsModule (without the pick() method) inside of any FeatureModule where will be used.
Now you can import icons in one place only (root module) and successfully use the component anywhere you want.
**/
```
##### _4.2. Configure Module (optional)_
```ts
import { NgxBootstrapIconsModule, ColorTheme } from 'ngx-bootstrap-icons';
import { alarm, alarmFill, alignBottom } from 'ngx-bootstrap-icons';
// Select some icons (use an object, not an array)
const icons = {
alarm,
alarmFill,
alignBottom
};
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxBootstrapIconsModule.pick(icons, {
width: '2em',
height: '2em',
theme: ColorTheme.Danger,
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
##### _Configure options_
| Name of input prarameter | Type | Required | Default Value | Description |
|--------------------------|----------------|----------|---------------|-------------|
| width | `string` | `false` | `null` | icon default width |
| height | `string` | `false` | `null` | icon default height |
| theme | `enum` | `false` | `null` | default color theme |
#### _5. Use it in template_
```ts
```
or (with your preffered tag)
```ts
```
or optionally use our enums for autocomplete support
```ts
import { iconNamesEnum } from 'ngx-bootstrap-icons';
public iconNames = iconNamesEnum;
```
Also you can use width and height for icon (By default width and height are 1rem)
```ts
```
```
```
#### _6. Input parameters_
| Name of input prarameter | Type | Required | Default Value | Description |
|--------------------------|----------------|----------|---------------|-------------|
| name | `string` | `true` | `null` | name of the icon|
| width | `string` | `false` | `null` | width of the icon. Default value used from svg |
| height | `string` | `false` | `null` | height of the icon. Default value used from svg |
| resetDefaultDimensions | `boolean` | `false` | `false` | if this parameter is set, default dimensions of the svg icon will be removed |