Angular 的蚂蚁设计图标
安装
ng add @ant-design/icons-angular
# or npm install @ant-design/icons-angular
使用量
您应该导入 IconDirective 在您的组件.
import { IconDirective } from '@ant-design/icons-angular';
@Component({
imports: [ IconDirective ]
})
export class AppComponent {}
注册您需要的图标 IconService (所有或明确,我们称之为 静态加载:
注意点! 我们强烈建议大家不要登记所有图标,这会大大增加捆绑大小.
import { Component, inject } from '@angular/core';
import { IconService } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons'
// import * as AllIcons from 'ant-icons-angular/icons';
@Component({
// ...
})
export class AppComponent {
readonly iconService = inject(IconService);
constructor() {
// Import all. NOT RECOMMENDED. ❌
// const antDesignIcons = AllIcons as {
// [key: string]: IconDefinition;
// };
// this.iconService.addIcon(...Object.keys(antDesignIcons).map(key => antDesignIcons[key]));
// Import what you need! ✔️
this.iconService.addIcon(...[ AccountBookFill ]);
this.iconService.twoToneColor = { primaryColor: '#1890ff' };
}
}
您也可以在 app.config.ts数字 :
import { ApplicationConfig } from '@angular/core';
import { provideAntIcons } from '@ant-design/icons-angular';
import { AccountBookFill } from '@ant-design/icons-angular/icons';
export const appConfig: ApplicationConfig = {
providers: [
provideAntIcons([ AccountBookFill ])
]
};
当您想要制作图标时 :
<span antIcon type="ant-cloud" theme="outline"></span>
请查看演示详情.
对于由Ant Design提供的图标,我们提供 动态加载 减少捆绑大小的策略.
刚刚配置你的 angular.json 甚至不需要注册 图标! 检查 examples 文件夹和 angular.json 更多细节.
命名空间
命名空间允许用户用简单的API来注册自己的图标,同时支持动态加载和静态加载.
如果你想添加一个 panda 图标 animal 名称空间 :
- 静态加载时,可以拨打
addIconLiteral('animal:panda', '<svg>...</svg>')· ; - 用于动态加载,只需放入
panda.svg下级assets/animal并让一只熊猫像:<span antIcon type="animal:panda">。 。 。 .
请查看演示详情.
发展
您可以找到源代码 这里。 。 。 .
设置
安装依赖性 @ant-design/icons-angular运行 npm run generate。 。 。 .
演示
运行 npm run generate 接下来 npm run start。 。 。 .
构建
运行 npm run build:lib。 。 。 .
延长
您可以简单地通过创建扩展指令或服务来扩展此软件包 IconDirective 财务报告和审定财务报表 IconService值得一提的是 _changeIcon 方法返回 a Promise<svg> 用于添加额外的修改.
纳克-佐罗-南特 这是扩展这个软件包的好例子.