Ionicons: 反応におけるイオニコン5の使用

申し訳ありませんが、それらのためのより良いドキュメントを含める必要があります。 とりあえず、最初のアプリチュートリアルでその方法を確認してください。 具体的にはデモアプリを見てください。

それで、いつそれを含める予定ですか？

ええ、IonIconの公式ドキュメントはreactIonicアプリにとって完全に間違っています。

これが公式なのか最新なのかはわかりませんが、これは私にとってはうまくいきました：

• ion-iconをIonIconに置き換えます
• 属性名をアイコンに置き換えます
• アイコン名を角かっこで囲み、キャメルケースに変更します
• ファイルでは、必ず「ionicons / icons」からアイコンをインポートしてください

それ以外の：
<ion-icon name="airplane-outline"></ion-icon>

反応するIonicアプリの場合、次のようになります。
<IonIcon icon={airplaneOutline}></IonIcon>

そして、必ずアイコン参照をインポートしてください。
import {arrowBackCircleOutline} from "ionicons/icons";

@lucejこれはbase64画像をインポートし、imgタグで囲む必要があります。これにより、色の変更が困難になります。マスキングはオプションですが、簡単な方法が必要です。
私は簡単なハックをしました、宝石を動かします。
コンポーネントを作成し、base64イメージファイルを置き換えて、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>
    )
}

今、私は必要な場所でこれと同じコンポーネントを使用できます

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