@mmbt/react-web-vector-icons/src/index.js

An adaptation of react-native-vector-icons for react web

import createIcon from './lib/create-icon-set';

export const AntDesign = createIcon(require('./glyphmaps/AntDesign.json'), 'AntDesign');
export const Entypo = createIcon(require('./glyphmaps/Entypo.json'), 'Entypo');
export const EvilIcons = createIcon(require('./glyphmaps/EvilIcons.json'), 'EvilIcons');
export const Feather = createIcon(require('./glyphmaps/Feather.json'), 'Feather');
export const FontAwesome = createIcon(require('./glyphmaps/FontAwesome.json'), 'FontAwesome');
export const FontAwesome5 = createIcon(require('./glyphmaps/FontAwesome5Free.json'), 'FontAwesome5');
export const FontAwesome6 = createIcon(require('./glyphmaps/FontAwesome6Free.json'), 'FontAwesome6');
export const Fontisto = createIcon(require('./glyphmaps/Fontisto.json'), 'Fontisto');
export const Foundation = createIcon(require('./glyphmaps/Foundation.json'), 'Foundation');
export const Ionicons = createIcon(require('./glyphmaps/Ionicons.json'), 'Ionicons');
export const MaterialCommunityIcons = createIcon(require('./glyphmaps/MaterialCommunityIcons.json'), 'MaterialCommunityIcons');
export const MaterialIcons = createIcon(require('./glyphmaps/MaterialIcons.json'), 'MaterialIcons');
export const Octicons = createIcon(require('./glyphmaps/Octicons.json'), 'Octicons');
export const SimpleLineIcons = createIcon(require('./glyphmaps/SimpleLineIcons.json'), 'SimpleLineIcons');
export const Zocial = createIcon(require('./glyphmaps/Zocial.json'), 'Zocial');

// ────────────────────────────────────────────────────────────────────────────────

import React, { Component } from 'react';

class Icon extends Component{
  render(){
    let Icon = null;
    switch (this.props.font) {
      case 'AntDesign': Icon = AntDesign; break;
      case 'Entypo': Icon = Entypo; break;
      case 'EvilIcons': Icon = EvilIcons; break;
      case 'Feather': Icon = Feather; break;
      case 'FontAwesome': Icon = FontAwesome; break;
      case 'FontAwesome5': Icon = FontAwesome5; break;
      case 'FontAwesome6': Icon = FontAwesome6; break;
      case 'Fontisto': Icon = Fontisto; break;
      case 'Foundation': Icon = Foundation; break;
      case 'Ionicons': Icon = Ionicons; break;
      case 'MaterialIcons': Icon = MaterialIcons; break;
      case 'MaterialCommunityIcons': Icon = MaterialCommunityIcons; break;
      case 'Octicons': Icon = Octicons; break;
      case 'Zocial': Icon = Zocial; break;
      case 'SimpleLineIcons': Icon = SimpleLineIcons; break;
      default: Icon = Ionicons; break;
    }
    return(
      <Icon
        name={this.props.name}
        color={this.props.color}
        size={this.props.size}
        style={this.props.style}
        className={this.props.className}
      />
    );
  }
}

export default Icon;