icons.js

import { mapValues } from 'lodash';
import images from './images/_index';

/**
 * This module outputs icon objects with the following shape:
 *
 * {
 *   image: <svg>...</svg>,
 *   ...props
 * }
 *
 * `props` here are config properties defined in this file for specific icons.
 * For example, an icon may face a specific direction, and the Icon component
 * accepts a `direction` prop to rotate directional icons, which relies on
 * defining the default direction here.
 */

/**
 * Configuration for individual icons.
 */
const config = {
  'arrow': {
    direction: 'left',
  },
  'chevron': {
    direction: 'down',
  },
  'chevron-double': {
    direction: 'down',
  }
};

/**
 * Map icon definition objects - imported object of images simply maps the icon
 * name to the raw svg, so we move that to the `image` property of the
 * definition object and set any additional configured properties for each icon.
 */
const icons = mapValues(images, (image, name) => {
  const props = config[name] || {};
  return { image, ...props };
});

export default icons;