how can I use ionicons 7 in an electron react app?

Question

I have an electron app (with react) that currently uses ionicons 5.2.3. In my project I found an scss folder with a subfolder ionicons which has a set of .scss files.

However, I'd like to upgrade to ionicons 7 because it has some icons I want.

So, I removed ionicons from the project (yarn remove ionicons), then added it back to get the latest version (yarn add ionicons). I renamed my scss\ionicons folder, then copied node_modules\ionicons\dist\ionicons into my scss folder. However, that new ionicons folder doesn't have scss files, it has svg files. But in a fit of optimism, rebuilt the app anyway. Result: I still only get the old icons showing up in my app.

For example, <ion-icon name={'clipboard-sharp'} /> shows the icon (which was available in my old ionicons 5.2.3), but <ion-icon name={'chevron-collapse-sharp'} /> does not show the icon (which is available in the current version of ionicons).

How do I get icons from ionicons 7 to actually show up in my app?

Answer 1

I have it working:

• I removed ionicons: yarn remove ionicons
• I added ionicons to get the latest version: yarn add ionicons
• I added @ionic/react: yarn add @ionic/react
• in my scss folder, I renamed the ionicons folder to ionicons-5.2.3

In my Icon component:

• import * as IonIcons from 'ionicons/icons';

•   const icon = IonIcons[children];
  
    if (!icon) {
      // use the old ionicons 5.2.3
      return <IonIcon style={style} name={children} />;
    }
    // use the new ionicons
    return <IonIcon style={style} icon={icon} />;
  
  

Note that for ionicons 5, use hyphens: <Icon>volume-high-outline</Icon>.

For ionicons 7, use camelCase: <Icon>removeSharp</Icon>