Scalable import of FontAwesome icons in generic icon component, with Storybook story

Icon.js

import React from 'react';
import PropTypes from 'prop-types';
import './Icon.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const Icon = ({ icon: iconName, color, backgroundColor, ...rest }) => {
  const faIconName = `fa${iconName.replace(/./, c => c.toUpperCase())}`;
  const faIcon = require(`@fortawesome/pro-light-svg-icons/${faIconName}.js`)[faIconName];

  return (
    <span {...rest}>
      <FontAwesomeIcon icon={faIcon} size="1x" />
    </span>
  )

};

Icon.propTypes = {
  icon: PropTypes.string.isRequired,
  color: PropTypes.string,
  backgroundColor: PropTypes.string,
}

Icon.defaultProps = {
    color: 'black',
    backgroundColor: 'white',
}

export default Icon

Icon.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import Icon from './Icon';

storiesOf('Icon', module)
  .add('FA paper plane', () => <Icon icon="paperPlane" />)