关于ng-alain图标icon不显示的解决方法
问题按照官网文档的推荐方法使用icon插件,插件会自动在 src 目录下生成两个文件:src/style-icons.ts 自定义部分无法解析(例如:远程菜单图标)src/style-icons-auto.ts 命令自动生成文件同时,需要手动在 startup.service.ts 中导入:import { ICONS_AUTO } from '../../../style-icons-...
·
问题
按照官网文档的推荐方法使用icon插件,插件会自动在 src 目录下生成两个文件:
src/style-icons.ts 自定义部分无法解析(例如:远程菜单图标)
src/style-icons-auto.ts 命令自动生成文件
同时,需要手动在 startup.service.ts 中导入:
import { ICONS_AUTO } from '../../../style-icons-auto';
import { ICONS } from '../../../style-icons';
@Injectable()
export class StartupService {
constructor(iconSrv: NzIconService) {
iconSrv.addIcon(...ICONS_AUTO, ...ICONS);
}
}
然后写了一些有效语法举例,如下:
<i class="anticon anticon-user"></i>
<i class="anticon anticon-question-circle-o"></i>
<i class="anticon anticon-spin anticon-loading"></i>
<i nz-icon class="anticon anticon-user"></i>
<i nz-icon nzType="align-{{type ? 'left' : 'right'}}"></i>
<i nz-icon [type]="type ? 'menu-fold' : 'menu-unfold'" [theme]="theme ? 'outline' : 'fill'"></i>
<i nz-icon [type]="type ? 'fullscreen' : 'fullscreen-exit'"></i>
<i nz-icon nzType="{{ type ? 'arrow-left' : 'arrow-right' }}"></i>
<i nz-icon nzType="filter" theme="outline"></i>
<nz-input-group [nzAddOnBeforeIcon]="focus ? 'anticon anticon-arrow-down' : 'anticon anticon-search'"></nz-input-group>
但是!但是!但是!重要的事情说三遍!有些图标无法显示,文档未说明处理方法。以下是我的解决思路,仅供参考!仅供参考!仅供参考!
解决方法
- 首先找到style-icons-auto.ts文件,文件内容如下:
/*
* Automatically generated by 'ng g ng-alain:plugin icon'
* @see https://ng-alain.com/cli/plugin#icon
*/
import {
AppstoreOutline,
ArrowDownOutline,
ClearOutline,
CloudOutline,
FolderOpenOutline,
FolderOutline,
FullscreenExitOutline,
FullscreenOutline,
GlobalOutline,
LockOutline,
LogoutOutline,
MailOutline,
MenuFoldOutline,
MenuUnfoldOutline,
PayCircleOutline,
PrinterOutline,
ScanOutline,
SettingOutline,
StarOutline,
TeamOutline,
ToolOutline,
UserOutline
} from '@ant-design/icons-angular/icons';
export const ICONS_AUTO = [
AppstoreOutline,
ArrowDownOutline,
CloudOutline,
ClearOutline,
FolderOpenOutline,
FolderOutline,
FullscreenExitOutline,
FullscreenOutline,
GlobalOutline,
LockOutline,
LogoutOutline,
MailOutline,
MenuFoldOutline,
MenuUnfoldOutline,
PayCircleOutline,
PrinterOutline,
ScanOutline,
SettingOutline,
StarOutline,
TeamOutline,
ToolOutline,
UserOutline
];
我们在ICONS_AUTO数组中,随便点击一个,按F12(vs code),就会跳到icons/outline文件加下,找到你需要的icon图标名称,将名称导入到ICONS_AUTO数组中,这样就可以显示图标了。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)