Open dragma opened 3 years ago
Hi did you manage to figure this out? I'm trying to do the same currently for my project
I managed to figure this out by not figuring this out. Instead I created a meta component that uses multiple icon modules
import React, { useMemo } from 'react';
import RWVIcon from 'react-web-vector-icons';
import MDIIcon from '@mdi/react';
import * as MDISVGS from '@mdi/js';
import camelcase from 'lodash.camelcase';
type IconProps = {
name: string,
type: string,
color: string,
size: number,
}
const initialSize = 15;
const initialMDISize = 0.6;
const ratio = initialMDISize / initialSize;
const Icon = ({
name, type, color, size = 15,
}: IconProps) => {
const font = useMemo(() => {
switch (type) {
case 'material-community': return 'MaterialCommunityIcons';
case 'material': return 'MaterialIcons';
case 'simple-line-icon': return 'SimpleLineIcons';
case 'zocial': return 'Zocial';
case 'font-awesome': return 'FontAwesome';
case 'octicon': return 'Octicons';
case 'ionicon': return 'Ionicons';
case 'foundation': return 'Foundation';
case 'evilicon': return 'EvilIcons';
case 'entypo': return 'Entypo';
case 'antdesign': return 'AntDesign';
default: return 'NoIdea';
}
}, [type]);
if (font === 'MaterialCommunityIcons') {
return (
<MDIIcon
path={MDISVGS[camelcase(`mdi ${name}`)]}
size={ratio * size}
color={color}
/>
);
}
return (
<RWVIcon
name={name}
font={font}
color={color}
size={size}
/>
);
};
export default Icon;
Hope it helps
@dragma Thanks, I didn't want to be using multiple packages just for icons. But guess there is no choice.
Btw, excellent solution!
Hi, could y ou tell us how to upgrade icon fonts ? I'm trying to upgrade the material community font to the lastest version, but I can't manage to make it work (if got weired symbols instead of the icons)![image](https://user-images.githubusercontent.com/4975026/116394492-43d0a100-a823-11eb-8c8e-6b10cffbff46.png)