0

我正在尝试将 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-icon-pack

4

2 回答 2

1

也许我错了，但感觉就像你没有安装图标包。翻阅了GitHub，找到了这样一个答案，希望对你有所帮助：

我设法让我的工作首先安装 eva-icons 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

于 2019-12-13T15:02:07.467 回答
0

你需要告诉 nb-icon 使用哪个包，你需要将 nebular 更新到最低 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'},

希望它有所帮助。此外，对于使用 fontawesome 图标，您不需要使用单独的 svg，您只需在图标包中注册 fontawesome 并访问它。要注册 fontawesome 使用这个

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

并用于星云图标

{
title: 'View Events',
icon: { icon: 'fa-eur', pack: 'font-awesome' },
link: 'events'},
于 2020-05-04T09:07:08.433 回答