npmpackage.info

Gathering detailed insights and metrics for @ant-design/icons-angular

Other packages similar to @ant-design/icons-angular

@nsfocus/icons-angular

2.1.3

<h1 align="center"> Ant Design Icons for Angular </h1>

@ng-zorro/icons

0.0.2

> Ant Design Icons for Angular with a better taste.

@ant-design/icons-angular

⭐ Ant Design SVG Icons

19.0.0

974

MIT

TypeScript

15.10 kB

13,891,312 4.4

Installations

npm install @ant-design/icons-angular

Developer Guide

BETA

Typescript

No

Module System

ESM

Node Version

20.11.1

NPM Version

10.2.4 Score

96.1

Supply Chain

97.2

Quality

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

8

Total

443

Closed

245

Merged

190

Issues

Open

113

Total

229

Closed

116

Releases

Unable to fetch releases

Contributors

View all 79 contributors

Languages

TypeScript

JavaScript

Less

HTML

Shell

CSS

EJS

TypeScript (99.03%)

JavaScript (0.84%)

Less (0.06%)

HTML (0.04%)

Shell (0.02%)

CSS (0.01%)

EJS (0.01%)

Developer

ant-design

Download Statistics

Total Downloads

13,891,312

Last Day

15,342

Last Week

63,428

Last Month

288,049

Last Year

3,630,636

GitHub Statistics

974 Stars

678 Commits

587 Forks

41 Watching

14 Branches

79 Contributors

Bundle Size

45.03 kB

Minified

15.10 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

19.0.0

Package Id

@ant-design/icons-angular@19.0.0

Unpacked Size

3.00 MB

Size

699.43 kB

File Count

2,516

NPM Version

10.2.4

Node Version

20.11.1

Publised On

25 Nov 2024

Total Downloads

Cumulative downloads

Total Downloads

13,891,312

Last day

0.3%

15,342

Compared to previous day

Last week

-18.1%

63,428

Compared to previous week

Last month

288,049

Compared to previous month

Last year

17%

3,630,636

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@ant-design/colors tslib

Peer Dependencies

@angular/common @angular/core @angular/platform-browser rxjs

Versions

Ant Design Icons for Angular

Installation

1ng add @ant-design/icons-angular
2
3# or npm install @ant-design/icons-angular

Usage

You should import IconDirective in your component.

1import { IconDirective } from '@ant-design/icons-angular';
2
3@Component({
4  imports: [ IconDirective ]
5})
6export class AppComponent {}

And register the icons that you need to IconService (all or explicitly, we call it static loading):

ATTENTION! We strongly suggest you not to register all icons. That would increase your bundle's size dramatically.

1import { Component } from '@angular/core';
2import { IconService } from '@ant-design/icons-angular';
3import { AccountBookFill } from '@ant-design/icons-angular/icons'
4// import * as AllIcons from 'ant-icons-angular/icons';
5
6@Component({
7  // ...
8})
9export class AppComponent {
10  constructor(private _iconService: IconService) {
11    // Import all. NOT RECOMMENDED. ❌
12    // const antDesignIcons = AllIcons as {
13      // [key: string]: IconDefinition;
14    // };
15    // this._iconService.addIcon(...Object.keys(antDesignIcons).map(key => antDesignIcons[key]));
16
17    // Import what you need! ✔️
18    this._iconService.addIcon(...[ AccountBookFill ]);
19    this._iconService.twoToneColor = { primaryColor: '#1890ff' };
20  }
21}

You can also provide icons you need in the app.config.ts:

1import { ApplicationConfig } from '@angular/core';
2import { provideAntIcons } from '@ant-design/icons-angular';
3import { AccountBookFill } from '@ant-design/icons-angular/icons';
4
5export const appConfig: ApplicationConfig = {
6  providers: [
7    provideAntIcons([ AccountBookFill ])
8  ]
9};

When you want to render an icon:

1<span antIcon type="ant-cloud" theme="outline"></span>

Checkout the demo for more details.

For icons provided by Ant Design, we provide dynamic loading strategy to reduce bundle's size. Just config your angular.json and you even don't need to register the icons! Checkout our examples dir and angular.json file for more details.

Namespace

Namespace is first introduced in 2.0.0-beta.2. It allows users to register their own icons with simple API, support both dynamic loading and static loading.

Say you want to add a panda icon in animal namespace. For static loading, you should call addIconLiteral('animal:panda', '<svg>...</svg>'). For dynamic loading, just put panda.svg under assets/animal. And render a panda like: <span antIcon type="animal:panda">.

Please checkout the demo for more details.

Development

You can find the source code here.

Setup

Install dependencies of @ant-design/icons-angular, and run npm run generate.

Demo

Run npm run generate and then npm run start.

Build

Run npm run build:lib.

Extension

You can simply extend this package by creating directives or services that extends IconDirective and IconService. And it is worth mentioning that _changeIcon method returns a Promise<svg> using which you could add extra modifications.

ng-zorro-antd is a good example of extending this package.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

5

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

4.4

/10

Last Scanned on 2025-01-27

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More