@axeptio/design-system/build/src/Core/Icon/index.jsx

Design System for Axeptio

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import ArrowNext from './svg/arrow-next.svg';
import ArrowDown from './svg/arrow-down.svg';
import ArrowRight2 from './svg/arrow_right_2.svg';
import Cancel from './svg/cancel.svg';
import CheckGradient from './svg/check-gradient.svg';
import Check from './svg/check.svg';
import Cross from './svg/cross.svg';
import Download from './svg/download.svg';
import FolderText from './svg/folder-text.svg';
import IlluCookieSolo from './svg/illu-cookie-solo.svg';
import Link from './svg/link.svg';
import LockShield from './svg/lock-shield.svg';
import MagnifyingGlass from './svg/magnifying-glass.svg';
import Mail from './svg/mail.svg';
import Number from './svg/number.svg';
import Password from './svg/password.svg';
import Planet from './svg/planet.svg';
import Play from './svg/play.svg';
import Sort from './svg/sort.svg';
import Taste from './svg/taste.svg';
import TheHand from './svg/the-hand.svg';
import ThePebble from './svg/the-pebble.svg';
import TheLogo from './svg/the-logo.svg';
import ThreeDotsVert from './svg/three_dots_vert.svg';
import ViewFilled from './svg/view-filled.svg';
import ViewOff from './svg/view-off.svg';
import View from './svg/view.svg';

const DEFAULT_SIZE = 32;

export const IconMap = {
  ArrowNext,
  ArrowDown,
  ArrowRight2,
  Cancel,
  CheckGradient,
  Check,
  Cross,
  Download,
  FolderText,
  IlluCookieSolo,
  Link,
  LockShield,
  MagnifyingGlass,
  Mail,
  Number,
  Password,
  Planet,
  Play,
  Sort,
  Taste,
  TheHand,
  ThePebble,
  TheLogo,
  ThreeDotsVert,
  ViewFilled,
  ViewOff,
  View
};

const Root = styled.span`
  position: relative;
  display: inline-flex;
  width: ${props => props.iconSize}px;
  height: ${props => props.iconSize}px;

  ${props =>
    props.strokeColor &&
    `
    svg {
      path {
        stroke: ${props.strokeColor};
      }
    }
  `}

  ${props =>
    props.noStroke &&
    `
    svg {
      path {
        stroke: none;
      }
    }
  `};

  ${props =>
    props.right &&
    `
    margin-left: 8px;
    margin-right: -8px;
  `}

  ${props =>
    props.left &&
    `
    margin-left: -8px;
    margin-right: 8px;
  `}

  ${props =>
    props.iconWidth &&
    `
    width: ${props.iconWidth}px;
    height: auto;
  `};

  svg {
    z-index: 1;
    position: relative;
    width: 100%;
    height: 100%;

    path:not([path]) {
      fill: ${props => props.fillColor};
    }
  }
`;

const Icon = ({ name, noStroke, iconSize, iconWidth, fillColor, strokeColor, right, left, className = '' }) => {
  if (!IconMap[name]) return null;
  const SvgIcon = IconMap[name];

  return (
    <Root
      noStroke={noStroke}
      iconSize={iconSize ? iconSize : DEFAULT_SIZE}
      iconWidth={iconWidth}
      fillColor={fillColor}
      strokeColor={strokeColor}
      right={right}
      left={left}
      className={`svg-icon ${name} ${className}`}
    >
      <SvgIcon />
    </Root>
  );
};

Icon.propTypes = {
  name: PropTypes.oneOf(Object.keys(IconMap)).isRequired,
  iconSize: PropTypes.number,
  iconWidth: PropTypes.number,
  strokeColor: PropTypes.string,
  fillColor: PropTypes.string,
  className: PropTypes.string,
  noStroke: PropTypes.bool,
  right: PropTypes.bool,
  left: PropTypes.bool
};

export default Icon;