import styled from 'styled-components';
import icons, { map } from './helpers/icons';

const Icon = styled.i.withConfig({ displayName: 'Icon' })`
  font-family: 'Bandwidth';
  font-size: ${({ theme, size }) => `${size}px` || theme.icon.fontSize};
  color: inherit;
  font-style: normal;
  display: inline-block;
  &::before {
    content: "${({ name, iconsHelper }) => iconsHelper(name) || iconsHelper('help_2')}";
    display: block;
    color: inherit;
  }
`;

Icon.defaultProps = {
  theme: {
    icon: { fontSize: '16px', fg: 'inherit' },
  },

  name: 'attention',
  iconsHelper: icons,

  size: 16,
};

Icon.usage = `
# Icon

Icons let you easily render some of our icons. Pass in the \`name\` prop to specify which one.

\`\`\`
<Icon name="checkmark" />
\`\`\`

## Icons

The icon definition file is in \`components/helpers/icons.js\`

${Object.keys(map).map((name) => `* ${name}`).join('\n')}
`;

export default Icon;

@@ -211,18 +211,16 @@
 %60$%7Bsize%7D
-px
 %60 %7C%7C the
@@ -592,18 +592,22 @@
   size: 
+'
 16
+px'
 ,%0A%7D;%0A%0AIc

Fix icon size override