Home

Awesome

ngx-icon-blur npm version StackBlitz

An Angular component that can be used to create frosted glass effect of icons.

preview

Available options

OptionDescription
srcA string that represents the src location of your icon
type"ROUNDED" or "SQUARE" or "CIRCLE
sizeA number that represents the size of the icon
paddingA number that represents the padding of the icon
nameA string that represents the alt name of your icon

Install

$ npm install ngx-icon-blur --save

Usage

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { NgxIconBlurModule } from 'ngx-icon-blur';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxIconBlurModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library is imported, you can use its component in your Angular application:

<!-- You can now use NgxIconBlur component in app.component.html -->
<h1>
  {{title}}
</h1>
<ngx-icon-blur
    [source]="'https://codekeep.io/assets/icon.svg'"
    [name]="'icon'"
    [padding]="5"
    [size]="100"
    [type]="'ROUNDED'"
></ngx-icon-blur>

StackBlitz Demo

Related

inspired by react-icon-blur

License

MIT © Wadie