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?
I have it working:
yarn remove ionicons
yarn add ionicons
yarn add @ionic/react
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>