reactjssvgsasselectronionicons

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


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?


Solution

  • I have it working:

    In my Icon component:

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

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