Ionicons версия 5 с angular - PullRequest
Новая
       50

Ionicons версия 5 с angular

2 голосов
/ 09 февраля 2020

Как добавить ionicons версии 5 в angular, с версией 4.5 было доступно css, и я могу использовать его таким образом, но теперь в версии 5 ionicons использует svgs и не знает, как его интегрировать с angular.

Текущий подход In angular. json

"styles": [
              "./node_modules/ionicons/dist/scss/ionicons.scss",
              "src/app/theme/styles/styles.scss"
            ],

Затем в моем app.component.ts (я использую небулярный интерфейс) https://akveo.github.io/nebular/docs/guides/register-icon-pack#register -icon-pack 

export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });
    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

Я вижу в вопросах, что для ioni c с angular они добавляют 

"assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ]

, но я не знаю, как продолжить

Ответы [ 3 ]

2 голосов
/ 03 марта 2020

Вы можете легко взломать иконки.

Я создал эту суть , вы можете скачать и ее в свой проект.

Затем импортировать NbIonIcons const в AppComponent, а затем добавьте его, используя Nebular метод registerSvgPack из NbIconLibraries (пример ниже) 

...
import {NbIonIcons} from './icons';
....
export class AppComponent implements OnInit {

  constructor(private iconsLibrary: NbIconLibraries, public store$: Store<any>, ) {
    iconsLibrary.registerFontPack('ion', { iconClassPrefix: 'ion' });
    iconsLibrary.registerFontPack('nebular', { iconClassPrefix: 'nb' });

    iconsLibrary.registerSvgPack('ionicons', NbIonIcons);

    iconsLibrary.setDefaultPack('nebular');
    // @ts-ignore
    if (window.Cypress) {
      // @ts-ignore
      window.__appStore__ = store$;
    }
  }

  ngOnInit() {
  }
}

В этот момент вы можете использовать свои значки как обычно. 

<nb-icon icon="home-outline" pack="ionicons"></nb-icon>

Имейте в виду, что вы должны обновить список, если значки добавлены / удалены из пакета.

1 голос
/ 20 февраля 2020

Ionicons ver 5 больше не похожа на поддержку файла значков шрифтов, как Ioni c 4, https://github.com/ionic-team/ionicons/tree/4.x#using -the-font-icon .

0 голосов
/ 09 февраля 2020

Включите следующий JS файл в индекс . html: 

<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

Добавьте ионный значок на страницу . html : 

<ion-icon name="heart"></ion-icon>

Источник: https://www.npmjs.com/package/ionicons

...