将星云与字体集成时出现的问题太棒了

Question

我正在尝试将Font Awesome图标与Nebular一起使用。

我已经在我的app.component.ts文件中添加了以下行

constructor(private iconLibraries: NbIconLibraries) {
this.iconLibraries.registerSvgPack('social-networks', {
'association': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">assets/images/building.svg</svg>',
'calendar1': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">assets/images/calendar.svg</svg>',
});
this.iconLibraries.setDefaultPack('social-networks');
}

并尝试像这样访问"日历1"图标。

{
title: 'View Events',
icon: 'calendar1',
link: 'events',
},

在控制台上，我收到以下错误-图标"calendar1"未在包"eva"中注册。检查图标名称或考虑切换图标包

但图标仍然不可用。谁能告诉我我做错了什么吗。我关注了这篇文章——https://akveo.github.io/nebular/docs/guides/register-icon-pack#register-图标包

Answer 1

也许我错了，但感觉你还没有安装图标包。浏览GitHub，发现了这样一个答案，希望它能有所帮助：

我设法通过首先安装eva图标使我的工作npm i eva-icons --save然后运行以下命令npm i @nebular/eva-icons --save

也许这些链接会很有用：https://github.com/akveo/nebular/issues/1275https://github.com/akveo/nebular/issues/1370

Answer 2

你需要告诉nb图标要使用哪个包，你需要将星云更新到最低4.6.0，然后你可以像这个一样使用它

constructor(private iconLibraries: NbIconLibraries) {
this.iconLibraries.registerSvgPack('social-networks', {
'association': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">assets/images/building.svg</svg>',
'calendar1': '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24">assets/images/calendar.svg</svg>',
});}

注册后，你需要添加像这个一样的图标值

{
title: 'View Events',
icon: { icon: 'calendar1', pack: 'social-networks' },
link: 'events'},

希望它能有所帮助。此外，对于使用fontwo敬畏的图标，你不需要使用单独的svg，你可以在图标包中注册fontwo敬畏并访问它

this.iconLibraries.registerFontPack('font-awesome', { packClass: 'fa' });

用于星云图标

{
title: 'View Events',
icon: { icon: 'fa-eur', pack: 'font-awesome' },
link: 'events'},