https://github.com/wadie/ngx-icon-blur

An Angular component that can be used to create frosted glass effect of icons.
https://github.com/wadie/ngx-icon-blur

angular blur icons imageblur

Last synced: 24 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wadie/ngx-icon-blur
• Owner: wadie
• License: mit
• Created: 2021-05-03T02:26:10.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-10T12:23:45.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T08:07:25.901Z (about 1 month ago)
• Topics: angular, blur, icons, imageblur
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ngx-icon-blur
• Size: 1.49 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-icon-blur - An Angular component that can be used to create a frosted glass effect for icons. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-icon-blur - An Angular component that can be used to create a frosted glass effect for icons. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-icon-blur - An Angular component that can be used to create a frosted glass effect for icons. (Table of contents / Third Party Components)

README

        
# ngx-icon-blur [![npm version](http://img.shields.io/npm/v/ngx-icon-blur.svg)](https://npmjs.org/package/ngx-icon-blur) [![StackBlitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-icon-blur)

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

![preview](https://imgur.com/a0P7xon.gif)

## 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

```bash

$ npm install ngx-icon-blur --save

```

## Usage

From your Angular `AppModule`:

```typescript

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:

```xml



  {{title}}



```

[StackBlitz Demo](https://stackblitz.com/edit/ngx-icon-blur)

## Related

inspired by [react-icon-blur](https://github.com/JP1016/react-icon-blur)

## License

MIT © [Wadie](https://github.com/wadie)