Icon.js

// Use this like <Icon name="bell" />

/* eslint import/no-dynamic-require: "off" */
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { ifProp } from 'styled-tools';
import { sizes } from '../constants/';
import colours from '../colours';

const getBorder = (colour) => `border: 0.05rem solid ${colour}`;
const getCircularBorder = css`
  border-radius: 50%;
  box-shadow: 0 0 0 0.05rem ${colours.gainsboro} inset;
  ${ifProp('bordered', 'box-shadow: none;')}
`;
const getHeight = ({ size }) => sizes.values[size];

const addBorder = css`
  ${ifProp('bordered', getBorder(colours.gainsboro))}
`;

const addCircularBorder = css`
  ${ifProp('circular', getCircularBorder)}
`;

const Wrapper = styled.span`
  box-sizing: border-box;
  color: black;
  display: inline-block;
  height: ${getHeight};
  margin: 0.1rem;
  overflow: hidden;
  width: ${getHeight};
  ${addBorder};
  ${addCircularBorder};

  & > svg {
    width: 100%;
    height: 100%;
    fill: currentcolor;
    stroke: currentcolor;
  }
`;

// TODO: We may need to use font size instead of set sizes
// We might need the icon size to match the font size of the container,
// so we might need to use rems
const Icon = ({ name, ...props }) => {
  const svg = require(`!raw-loader!./icons/${name}.svg`);

  return <Wrapper {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
};

Icon.propTypes = {
  /** An icon may include a border to emphasise the edges of white or
  *   transparent content. */
  bordered: PropTypes.bool,

  /** An icon may appear circular. */
  circular: PropTypes.bool,

  /** Specifies the name of the icon. */
  name: PropTypes.string.isRequired,

  /** An image may appear at different sizes. */
  size: PropTypes.oneOf(sizes.labels),
};

Icon.defaultProps = {
  bordered: false,
  circular: false,
  size: 'mini',
};

export default Icon;