ngx-icon-blur

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

Available options

Option | Description :---:|--- src | A string that represents the src location of your icon type | "ROUNDED" or "SQUARE" or "CIRCLE size | A number that represents the size of the icon padding | A number that represents the padding of the icon name | A 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