An Angular component that can be used to create frosted glass effect of icons.
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 |
$ npm install ngx-icon-blur --save
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>
inspired by react-icon-blur
MIT © Wadie