How to upgrade icons fonts

[dragma]

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)

[rohiniaru]

Hi did you manage to figure this out? I'm trying to do the same currently for my project

[dragma]

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

[rohiniaru]

@dragma Thanks, I didn't want to be using multiple packages just for icons. But guess there is no choice.

Btw, excellent solution!