elements.tsx

import styled from '../../../styled-components'

const icons = {
  'chevron-down': '\f078',
  'chevron-up': '\f077',
  'plus-square': '\f0fe',
  terminal: '\f120',
  database: '\f1c0',
  code: '\f121',
  save: '\f0c7',
  cogs: '\f085',
  chain: '\f0c1',
  calculator: '\f1ec',
  close: '\f00d',
  trash: '\f014',
  flask: '\f0c3',
}

export const IconElement = styled<
  {
    icon: string
  },
  'span'
>('span')`
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;

  :before {
    content: "${({ icon }) => icons[icon]}";
  }
`