IconUsingAttrs.js

/* eslint import/no-dynamic-require: "off" */
import R from 'ramda';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { ifProp } from 'styled-tools';
import { margin } from 'polished';
import { baseTheme, getColour } from '@crowdlab/themes';
import { sizes } from '../constants/';

const getHeight = ({ size }) => sizes.values[size];

const border = css`border: 0.05rem solid ${getColour('border')};`;

const addBorder = css`${ifProp('bordered', border)};`;

const circularBorder = css`
  border-radius: 50%;
  box-shadow: 0 0 0 0.05rem ${getColour('border')} inset;
  ${ifProp('bordered', 'box-shadow: none')};
`;

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

const Icon = styled.span.attrs({
  dangerouslySetInnerHTML: ({ name }) => ({
    __html: require(`!raw-loader!./icons/${name}.svg`),
  }),
})`
  box-sizing: border-box;
  color: ${R.prop('colour')};
  display: inline-block;
  height: ${getHeight};
  ${margin('0.1rem')};
  overflow: hidden;
  width: ${getHeight};
  ${addBorder};
  ${addCircularBorder};

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

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,

  /** The colour of the icon. */
  colour: PropTypes.string,

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

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

  /** Specifies the theme. */
  theme: PropTypes.shape({
    /** Specifies the palette. */
    palette: PropTypes.object.isRequired,
  }).isRequired,
};

Icon.defaultProps = {
  bordered: false,
  circular: false,
  colour: 'black',
  size: 'mini',
  theme: baseTheme,
};

export default Icon;