把星云和字体结合在一起的问题

Question

我正在尝试使用字体-令人惊讶的图标与星云。

我在我的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');
  }

并试图像这样访问“calendar1”图标。

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

在控制台上，我得到了下面的错误-图标'calendar1‘没有在包'eva’中注册。检查图标名或考虑切换图标包.

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

Answer 1

也许我错了，但感觉好像你还没有安装图标包。纵观GitHub，找到了这样的答案，希望它能有所帮助：

我首先安装了eva图标npm i eva-icons --save，然后运行以下命令npm i @nebular/eva-icons --save，从而使我的工作正常进行。

也许这些链接是有用的：https://github.com/akveo/nebular/issues/1275 https://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'},

希望能帮上忙。此外，对于使用方框图标，您不需要使用单独的svg，您只需在图标包中注册方框并访问它。要注册方格，请使用以下内容

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

在星云图标中使用

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