fido-node.github.io/components/personal-card/elements/ContactsButtons.tsx

import * as React from 'react';
import '@fortawesome/fontawesome-svg-core';
import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
import {
  faTelegram,
  faTwitter,
  faGithub,
  faLinkedin,
  faTwitch,
  faTelegramPlane
} from '@fortawesome/free-brands-svg-icons';

import { IconDefinition, IconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Contact, contactToLink, ContactType } from '../../../src/contacts/contacts';

type Props = {
  contacts: Contact[];
};

const typeToIcon: { [key in ContactType]: [IconDefinition, string?] } = {
  tg: [faTelegramPlane],
  mail: [faEnvelope],
  twitter: [faTwitter],
  github: [faGithub],
  linkedin: [faLinkedin],
  twitch: [faTwitch]
};

const ContactComp = ({ id, type }: Contact) => {
  const iconDescr = typeToIcon[type];
  return (
    <div className={'p-3'}>
      <a
        className={'text-5xl text-gray-600' + ' ' + iconDescr[1]}
        href={contactToLink({ id, type })}
        target="_blank">
        <FontAwesomeIcon key={type} icon={iconDescr[0]} />
      </a>
    </div>
  );
};

export default ({ contacts }: Props) => (
  <div className={'flex flex-row  justify-center'}>{contacts.map((c) => ContactComp(c))}</div>
);