ng-icons 项目教程

ng-icons 项目教程

ng-icons The ultimate icon library for Angular 项目地址: https://gitcode.com/gh_mirrors/ng/ng-icons

1. 项目介绍

ng-icons 是一个专为 Angular 设计的终极图标库，允许用户从多个图标集中使用单一图标组件。目前支持的图标库包括 Bootstrap Icons、Heroicons、Ionicons、Material Icons 等，总共包含超过 56,000 个图标。ng-icons 是一个 MIT 许可的开源项目，其持续开发由贡献者和赞助者支持。

2. 项目快速启动

安装

首先，你需要安装 @ng-icons/core 包，以及你打算使用的图标集库。例如：

npm i @ng-icons/core @ng-icons/heroicons

或者使用 Yarn：

yarn add @ng-icons/core @ng-icons/heroicons

使用

在你的 Angular 模块中导入 NgIconsModule 并注册你希望使用的图标：

import { NgIconsModule } from '@ng-icons/core';
import { featherAirplay } from '@ng-icons/feather-icons';
import { heroUsers } from '@ng-icons/heroicons/outline';

@NgModule({
  imports: [
    BrowserModule,
    NgIconsModule.withIcons([featherAirplay, heroUsers])
  ]
})
export class AppModule { }

在模板中使用图标：

<ng-icon name="featherAirplay"></ng-icon>

3. 应用案例和最佳实践

案例1：动态加载图标

ng-icons 支持动态加载图标，这对于需要从 URL 或程序化生成 SVG 的场景非常有用。你可以使用 provideNgIconLoader 函数来实现这一点：

import { provideNgIconLoader } from '@ng-icons/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgIconLoader((name) => {
      // 这里可以实现从URL或其他方式加载图标
      return fetch(`https://example.com/icons/${name}.svg`).then(res => res.text());
    })
  ]
});

案例2：全局配置

你可以通过 provideNgIconsConfig 函数来配置图标的默认大小和颜色：

import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core';

@NgModule({
  imports: [
    BrowserModule,
    NgIconsModule.withIcons([featherAirplay, heroUsers])
  ],
  providers: [
    provideNgIconsConfig({
      size: '1.5em',
      color: 'red'
    })
  ]
})
export class AppModule { }

4. 典型生态项目

Angular Material

Angular Material 是 Angular 官方的 UI 组件库，与 ng-icons 结合使用可以快速构建美观且功能强大的用户界面。

Ionic Framework

Ionic Framework 是一个跨平台的移动应用开发框架，ng-icons 中的 Ionicons 图标集可以直接用于 Ionic 应用中，提升应用的视觉体验。

Bootstrap

Bootstrap 是一个流行的前端框架，ng-icons 中的 Bootstrap Icons 可以与 Bootstrap 组件无缝集成，增强网页的视觉效果。

通过以上模块的介绍和实践，你可以快速上手并充分利用 ng-icons 项目，为你的 Angular 应用添加丰富的图标资源。

ng-icons The ultimate icon library for Angular 项目地址: https://gitcode.com/gh_mirrors/ng/ng-icons