Иониконы версии 5 с угловым

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

Текущий подход в 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() {
  }
}

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

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

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


ionic-framework angular ionicons nebular
person anthony willis muñoz    schedule 09.02.2020    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Иконки легко взломать.

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

Затем импортируйте константу NbIonIcons в AppComponent, а затем добавьте ее, используя метод Небулар 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>

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

person Matteo Gaggiano    schedule 02.03.2020
comment
похоже, это должно сработать, на этой неделе не было времени проверить это. Единственная неприятная вещь - это ручная часть при получении обновления ionic. Скоро утвердю. - person anthony willis muñoz; 03.03.2020
comment
Это работает. Однако я не могу стилизовать значки с помощью nb-icon. Любые идеи? - person Nick; 25.04.2020
comment
Возможно, вы можете расширить службу / директиву nbIcon и использовать useClass для предоставления новой директивы. Я сделал аналогичный devlop на NbMenu, добавив к нему всплывающие подсказки, но используя исходный NbMenuService - person Matteo Gaggiano; 26.04.2020

arrow_upward
2
arrow_downward

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

person JJ Lee    schedule 20.02.2020
comment
Я искал на форумах несколько дней, очищал кеш, устанавливал npm, это решение работало как шарм - person fsalazar_sch; 05.05.2020

arrow_upward
1
arrow_downward

Шаг 1: npm установите ionicons

Шаг 2: включите ionicons в активы в angular.json

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

Шаг 3. Добавьте скрипт в Index.html

<body class="mat-typography">
<app-root></app-root>
  <script type="module" src="ionicons/ionicons.esm.js"></script>
  <script nomodule="" src="ionicons.js"></script>
</body>

Шаг 4. Добавьте схемы: [CUSTOM_ELEMENTS_SCHEMA] в app.module.ts

@NgModule({
declarations: [
    AppComponent
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

если вы используете ion-icon в другом модуле, добавьте схемы: [CUSTOM_ELEMENTS_SCHEMA], чтобы вы не получили ошибку веб-компонента.

Шаг 5: Используйте обычные как

<ion-icon name="heart"></ion-icon>
person Sathish Kumar    schedule 17.09.2020

arrow_upward
-3
arrow_downward

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

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

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

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

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

person Cyril Blanchet    schedule 09.02.2020