Ionicons: Using ionicons 5 in react

[designerdarpan]

How to use it in react application , i found react-ionicon package but its kind of outdated and supports ionicons 3 , is there any way i can import ionicons 5 in my react application.
I kind of work around with cdn and it seems to work fine , but i couldnt work around with node modules.

[dotNetkow]

We definitely need to include better docs for those, sorry! For the time being, check out our first app tutorial to see how; specifically look at the demo app.

[designerdarpan]

So when do you plan to include it ?

[lucej]

Yeah the official IonIcon documentation is completely wrong for a react Ionic app.

No idea if this is official or up to date but this worked for me:

• Replace ion-icon with IonIcon
• Replace the attribute name with icon
• Wrap icon name in brackets and change to camelCase
• In the file be sure to import the icon from "ionicons/icons"

Instead of:
<ion-icon name="airplane-outline"></ion-icon>

For a react Ionic app it should be:
<IonIcon icon={airplaneOutline}></IonIcon>

And be sure to import the icon reference:
import {arrowBackCircleOutline} from "ionicons/icons";

[designerdarpan]

@lucej this will import base64 image and should be enclosed inside a img tag , which would make changing color difficult , masking it would be an option but i need a simple way to do it.
i did a simple hack , works a gem.
making a component and replacing base64 image files such that i would only get svg markup

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>
    )
}

now i can use this same component wherever i need

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