Ionicons: Usando ionicons 5 em reagir

Definitivamente, precisamos incluir documentos melhores para eles, desculpe! Por enquanto, confira nosso primeiro tutorial do aplicativo para ver como; olhar especificamente para o aplicativo de demonstração .

Então, quando você planeja incluí-lo?

Sim, a documentação oficial do IonIcon está completamente errada para um aplicativo Ionic de reação.

Não faço ideia se isso é oficial ou atualizado, mas isso funcionou para mim:

• Substitua ion-icon por IonIcon
• Substitua o nome do atributo pelo ícone
• Coloque o nome do ícone entre colchetes e mude para camelCase
• No arquivo certifique-se de importar o ícone de "ionicons/icons"

Em vez de:
<ion-icon name="airplane-outline"></ion-icon>

Para um aplicativo Ionic de reação, deve ser:
<IonIcon icon={airplaneOutline}></IonIcon>

E certifique-se de importar a referência do ícone:
import {arrowBackCircleOutline} from "ionicons/icons";

@lucej isso importará a imagem base64 e deve ser incluída dentro de uma tag img, o que dificultaria a mudança de cor, mascará-la seria uma opção, mas eu preciso de uma maneira simples de fazer isso.
eu fiz um hack simples, funciona uma jóia.
fazendo um componente e substituindo os arquivos de imagem base64 de modo que eu só receba marcação svg

import React from 'react'
export default function IonIconComponent(props) {
    let icon = props.icon.replace("data:image/svg+xml;utf8,","");
    return (
        <div className="ion-icon-container">
            <div className="icon-inner" dangerouslySetInnerHTML={{__html:icon}}/>
        </div>
    )
}

agora eu posso usar esse mesmo componente onde eu precisar

import {createOutline} from 'ionicons/icons/index';
export const ActionComponent = withRouter((props) => {
    const data = props;
  return (
    <>
          <IonIconComponent icon={createOutline}/>
    </>
  )
})