Ionicons: Integrar V5 em angular

Criado em 9 fev. 2020 · 11Comentários · Fonte: ionic-team/ionicons

Bem, agora a v5 não tinha scss, então qual é a maneira correta de integrar e consumir isso em angular?

Fonte

anthowm

👍4

Comentários muito úteis

Como @bleuscyther menciona, você pode integrar o script em seu index.html . Existem duas falhas na minha opinião sobre isso: 1) não é a maneira Angular de integrar scripts em index.html e 2) vincula um script hospedado externamente.

Número 2) pode ser corrigido instalando localmente o Ionicons 5 com npm. Mas os dados dentro de node_modules não podem ser vinculados a partir de index.html , portanto, precisamos de um script que copie toda a pasta ionicons de node_modules para os ativos do nosso aplicativo.

Isso pode ser feito da seguinte maneira modificando angular.json . Encontre o array assets $7$#$ nos objetos build e test e adicione as seguintes linhas:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}

Em seguida, basta vincular em index.html o arquivo correto. Deve ser: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

Número 1) parece ser complicado. Depois de seguir o guia sobre a integração do Stencil em um aplicativo Angular, descobri que essa abordagem funciona. Abra main.ts no seu projeto Angular e adicione o seguinte código no final:

import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});

Isso basicamente dirá ao script Ionicons para procurar o diretório svg dentro assets/ionicons/ . Para ser honesto, não sei exatamente por que e não consegui encontrar documentação sobre isso. Talvez alguém da equipe Ionicon possa me dizer se existe uma maneira melhor de fazer isso.

De qualquer forma, tudo o que você precisa fazer é garantir que o diretório svg seja realmente copiado para o seu assets . Eu fiz isso com uma edição semelhante em angular.json como no número 2) acima:

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

Isso apenas copiará a pasta svg para os ativos, porque é tudo o que precisaremos a partir daí.

andreas-aeschlimann em 19 fev. 2020

👍4

Todos 11 comentários

Em _app.module.ts_

import { NgModule, /** ADD THIS -> **/ CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    declarations: [...],
    entryComponents: [...],
    imports: [...],
    exports: [...],
    providers: [...],
    schemas: [CUSTOM_ELEMENTS_SCHEMA] /** 👈🏻 ADD THIS **/ 
})
export AppModule {}

em _src\index.html_

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

Recompilar/Reservar

bleuscyther em 9 fev. 2020

👍2

Obrigado pela resposta que funciona, mas existe uma maneira de usá-lo dessa maneira?
https://stackoverflow.com/questions/60133077/ionicons-version-5-with-angular

anthowm em 10 fev. 2020

Embora isso funcione, não é a maneira Angular de incluir scripts em index.html. Espero que haja uma maneira mais limpa.

Isso significa que precisamos mudar tudo

andreas-aeschlimann em 12 fev. 2020

👍1

Isso pode ser feito da seguinte maneira modificando angular.json . Encontre o array assets $7$#$ nos objetos build e test e adicione as seguintes linhas:

{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}

Em seguida, basta vincular em index.html o arquivo correto. Deve ser: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>

import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});

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

Isso apenas copiará a pasta svg para os ativos, porque é tudo o que precisaremos a partir daí.

andreas-aeschlimann em 19 fev. 2020

👍4

import * as icons from 'ionicons/icons';
import { DomSanitizer } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'page-icons',
  templateUrl: './icons.component.html',
})
export class IconsComponent implements OnInit {
  icons: = icons;

  constructor(private domSanitizer: DomSanitizer) {}
}

<img [src]="domSanitizer.bypassSecurityTrustUrl(newIcons.heart)">

Mas não pode controlar a cor do ícone (imagem).

surmon-china em 19 fev. 2020

👍1

A cor parece ser um problema separado (#784) Funciona para ícones que não possuem uma cor de traço codificada.

streamliner18 em 8 mar. 2020

Como @bleuscyther menciona, você pode integrar o script em seu index.html . Existem duas falhas na minha opinião sobre isso: 1) não é a maneira Angular de integrar scripts em index.html e 2) vincula um script hospedado externamente.
Número 2) pode ser corrigido instalando localmente o Ionicons 5 com npm. Mas os dados dentro de node_modules não podem ser vinculados a partir de index.html , então precisamos de um script que copie toda a pasta ionicons de node_modules para os ativos do nosso aplicativo.
Isso pode ser feito da seguinte maneira modificando angular.json . Encontre o array assets $7$#$ nos objetos build e test e adicione as seguintes linhas:
{
  "glob": "**/*",
  "input": "./node_modules/ionicons",
  "output": "./assets/ionicons"
}
Em seguida, basta vincular em index.html o arquivo correto. Deve ser: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>
Número 1) parece ser complicado. Depois de seguir o guia sobre a integração do Stencil em um aplicativo Angular, descobri que essa abordagem funciona. Abra main.ts no seu projeto Angular e adicione o seguinte código no final:
import { applyPolyfills, defineCustomElements } from "ionicons/dist/loader";

applyPolyfills().then(() => {
  defineCustomElements(window, {
    resourcesUrl: "assets/ionicons/"
  });
});
Isso basicamente dirá ao script Ionicons para procurar o diretório svg dentro assets/ionicons/ . Para ser honesto, não sei exatamente por que e não consegui encontrar documentação sobre isso. Talvez alguém da equipe Ionicon possa me dizer se existe uma maneira melhor de fazer isso.
De qualquer forma, tudo o que você precisa fazer é garantir que o diretório svg seja realmente copiado para o seu assets . Eu fiz isso com uma edição semelhante em angular.json como no número 2) acima:
{
  "glob": "**/*",
  "input": "./node_modules/ionicons/dist/svg",
  "output": "./assets/ionicons/svg"
 }
Isso apenas copiará a pasta svg para os ativos, porque é tudo o que precisaremos a partir daí.

Quando faço isso, vejo o ícone usando <ion-icon name="heart"></ion-icon> mas também recebo um erro dentro do cli 'ion-icon' is not a known element:

Alguma idéia de como consertar isso?

codevladimir em 30 abr. 2020

Como @bleuscyther menciona, você pode integrar o script em seu index.html . Existem duas falhas na minha opinião sobre isso: 1) não é a maneira Angular de integrar scripts em index.html e 2) vincula um script hospedado externamente.
Número 2) pode ser corrigido instalando localmente o Ionicons 5 com npm. Mas os dados dentro de node_modules não podem ser vinculados a partir de index.html , portanto, precisamos de um script que copie toda a pasta ionicons de node_modules para os ativos do nosso aplicativo.
Isso pode ser feito da seguinte maneira modificando angular.json . Encontre o array assets $7$#$ nos objetos build e test e adicione as seguintes linhas:
```
{
"globo": " */ ",
"input": "./node_modules/ionicons",
"saída": "./assets/ionicons"
}
```
Em seguida, basta vincular em index.html o arquivo correto. Deve ser: <script src="assets/ionicons/dist/ionicons/ionicons.esm.js" type="module"></script>
Número 1) parece ser complicado. Depois de seguir o guia sobre a integração do Stencil em um aplicativo Angular, descobri que essa abordagem funciona. Abra main.ts em seu projeto Angular e adicione o seguinte código no final:
```
import { applyPolyfills, defineCustomElements } de "ionicons/dist/loader";
applyPolyfills().then(() => {
defineCustomElements(janela, {
resourcesUrl: "assets/ionicons/"
});
});
```
Isso basicamente dirá ao script Ionicons para procurar o diretório svg dentro assets/ionicons/ . Para ser honesto, não sei exatamente por que e não consegui encontrar documentação sobre isso. Talvez alguém da equipe Ionicon possa me dizer se existe uma maneira melhor de fazer isso.
De qualquer forma, tudo o que você precisa fazer é certificar-se de que o diretório svg está realmente copiado em seu assets . Eu fiz isso com uma edição semelhante em angular.json como no número 2) acima:
```
{
"globo": " */ ",
"input": "./node_modules/ionicons/dist/svg",
"saída": "./assets/ionicons/svg"
}
```
Isso apenas copiará a pasta svg para os ativos, porque é tudo o que precisaremos a partir daí.
Quando faço isso, vejo o ícone usando <ion-icon name="heart"></ion-icon> mas também recebo um erro dentro do cli 'ion-icon' is not a known element:
Alguma idéia de como consertar isso?

O segundo post deste problema não resolve isso? Ele fez para mim.

andreas-aeschlimann em 30 abr. 2020

Sim, funcionou. Mas acho que isso ainda não está pronto para uso no último angular.

codevladimir em 2 mai. 2020

👍1

A solução do @bleuscyther funciona bem, mas a minha não, que considero a mesma, mas do local node_modules :

"scripts": [
  "node_modules/ionicons/dist/ionicons.js"
]

Obteve este erro em vez disso:

GET http://localhost:4200/ionicons/ionicons.esm.js net::ERR_ABORTED 404 (Not Found)

przemekpobuta em 31 mai. 2020

Basta adicionar isso aos ativos em angular.json e tudo funciona.

 `{
      "glob": "**/*.svg",
      "input": "node_modules/ionicons/dist/ionicons/svg",
      "output": "./svg"
  },`

Msender em 22 jul. 2020

Esta página foi útil?

0 / 5 - 0 avaliações

Questões relacionadas

site ionicons.com: o link v3 redireciona para a página principal

janhaertel · 4Comentários

Solicitação: ícone Stack Overflow

cmtonkinson · 6Comentários

Ícones iônicos não funcionam na versão mais recente

marlonwesleysimon · 7Comentários

definindo a cor do traço

noorbakerally · 11Comentários

Adicione um ícone de ampulheta

modvd · 4Comentários