将 nebular 与 font-awesome 集成时的问题答案

【问题标题】：Issues while integrating nebular with font-awesome将 nebular 与 font-awesome 集成时的问题
【发布时间】：2020-05-04 17:07:08
【问题描述】：

我正在尝试在 Nebular 中使用 Font-Awesome 图标。

我在 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

【问题讨论】：

标签： angular font-awesome nebular

【解决方案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

【讨论】：

【解决方案2】：

你需要告诉 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'},

【讨论】：