# @vicentecalfo/ngx-simple-icons

> This package provides the Simple Icons (https://github.com/simple-icons/simple-icons) packaged as a set of Angular components.

Latest version **1.2.0** (published 2021-01-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vicentecalfo/ngx-simple-icons
pnpm add @vicentecalfo/ngx-simple-icons
yarn add @vicentecalfo/ngx-simple-icons
bun add @vicentecalfo/ngx-simple-icons
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2021-01-27 |
| First published | 2021-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 49.2 MB |
| Known vulnerabilities | 0 (+20 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Vicente Calfo |
| Maintainers | vicentecalfo |
| Keywords | angular, simple-icons, brands, icons |

## Links

- npm: https://www.npmjs.com/package/@vicentecalfo/ngx-simple-icons
- Repository: https://github.com/vicentecalfo/ngx-simple-icons
- Homepage: https://github.com/vicentecalfo/ngx-simple-icons#readme
- Issues: https://github.com/vicentecalfo/ngx-simple-icons/issues
- npm.io page: https://npm.io/package/@vicentecalfo/ngx-simple-icons

## Dependencies (9)

- [rxjs](https://npm.io/package/rxjs.md) ~6.6.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [zone.js](https://npm.io/package/zone.js.md) ~0.10.2
- [@angular/core](https://npm.io/package/@angular/core.md) ~11.0.9
- [@angular/common](https://npm.io/package/@angular/common.md) ~11.0.9
- [@angular/router](https://npm.io/package/@angular/router.md) ~11.0.9
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ~11.0.9
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ~11.0.9
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ~11.0.9

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2021-01-27

## README

# @vicentecalfo/ngx-simple-icons
This package provides the [Simple Icons](https://github.com/simple-icons/simple-icons) packaged as a set of Angular components.

## Installation
First you need to install the npm module.
```
npm install @vicentecalfo/ngx-simple-icons
```

## Usage
### 1. Import the icon module
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Simple Icons Gatsby
import { SimpleIconsGatsbyModule } from '@vicentecalfo/ngx-simple-icons';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SimpleIconsGatsbyModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```
### 2. Use the component

```html
// Selector anatomy
/*
* Rules for icon slug:
* -> All words in lowercase;
* -> No space between words;
* -> If the name has a period, replace it with -dot- (Ferrari N.V. -> ferrarin-dot-v-dot).
*/

<simple-icons-[ICON-SLUG]></simple-icons-[ICON-SLUG]>

<simple-icons-ferrarin-dot-v-dot></simple-icons-ferrarin-dot-v-dot>

```

```html
<simple-icons-gatsby></simple-icons-gatsby>
```

#### 2.1 Change Styles

```html
// size
<simple-icons-gatsby size="50px"></simple-icons-gatsby>

// color
<simple-icons-gatsby color="#cc0000"></simple-icons-gatsby>
```
## Note
Versioning follows the [Simple Icons](https://github.com/simple-icons/simple-icons) package.

---
_Source: https://npm.io/package/@vicentecalfo/ngx-simple-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._