Icon Approach Theory

Icon.tsx

import React from 'react';
import { IconProps } from './types';
import { dimensionsMap } from './const';
import classNames from 'classnames';

const Icons = {
  AngleDown: () => (
    <path
      d="M11.668 14.8575L7.13767 10.1127C6.95411 9.92339 6.95411 9.61727 7.13767 9.42796L7.41496 9.14198C7.59852 8.95267 7.89533 8.95267 8.07889 9.14198L12 13.2625L15.9211 9.14601C16.1047 8.9567 16.4015 8.9567 16.585 9.14601L16.8623 9.43199C17.0459 9.6213 17.0459 9.92741 16.8623 10.1167L12.332 14.8615C12.1484 15.0468 11.8516 15.0468 11.668 14.8575Z"
      fill="currentColor"
    />
  ),
  AngleLeft: () => (
    <path
      d="M9.14249 11.668L13.8873 7.13767C14.0766 6.95411 14.3827 6.95411 14.572 7.13767L14.858 7.41496C15.0473 7.59852 15.0473 7.89533 14.858 8.07889L10.7375 12L14.854 15.9211C15.0433 16.1047 15.0433 16.4015 14.854 16.585L14.568 16.8623C14.3787 17.0459 14.0726 17.0459 13.8833 16.8623L9.13846 12.332C8.95318 12.1484 8.95318 11.8516 9.14249 11.668Z"
      fill="currentColor"
    />
  ),
  AngleRight: () => (
    <path
      d="M14.8575 12.332L10.1127 16.8623C9.92339 17.0459 9.61727 17.0459 9.42796 16.8623L9.14198 16.585C8.95267 16.4015 8.95267 16.1047 9.14198 15.9211L13.2625 12L9.14601 8.07889C8.9567 7.89533 8.9567 7.59852 9.14601 7.41496L9.43199 7.13767C9.6213 6.95411 9.92741 6.95411 10.1167 7.13767L14.8615 11.668C15.0468 11.8516 15.0468 12.1484 14.8575 12.332Z"
      fill="currentColor"
    />
  ),
  AngleUp: () => (
    <path
      d="M12.332 9.14249L16.8623 13.8873C17.0459 14.0766 17.0459 14.3827 16.8623 14.572L16.585 14.858C16.4015 15.0473 16.1047 15.0473 15.9211 14.858L12 10.7375L8.07889 14.854C7.89533 15.0433 7.59852 15.0433 7.41496 14.854L7.13767 14.568C6.95411 14.3787 6.95411 14.0726 7.13767 13.8833L11.668 9.13846C11.8516 8.95318 12.1484 8.95318 12.332 9.14249Z"
      fill="currentColor"
    />
  ),
  ArrowCircleDown: () => (
    <path
      d="M12 2C6.47581 2 2 6.47581 2 12C2 17.5242 6.47581 22 12 22C17.5242 22 22 17.5242 22 12C22 6.47581 17.5242 2 12 2ZM20.7097 12C20.7097 16.7863 16.8347 20.7097 12 20.7097C7.21371 20.7097 3.29032 16.8347 3.29032 12C3.29032 7.21371 7.16532 3.29032 12 3.29032C16.7863 3.29032 20.7097 7.16532 20.7097 12ZM16.9798 11.8185L16.7016 11.5403C16.5121 11.3508 16.1976 11.3508 16.0121 11.5484L12.6855 14.996V7.32258C12.6855 7.05645 12.4677 6.83871 12.2016 6.83871H11.7984C11.5323 6.83871 11.3145 7.05645 11.3145 7.32258V14.996L7.9879 11.5444C7.79839 11.3508 7.4879 11.3468 7.29839 11.5363L7.02016 11.8145C6.83065 12.004 6.83065 12.3105 7.02016 12.5L11.6573 17.1411C11.8468 17.3306 12.1532 17.3306 12.3427 17.1411L16.9798 12.5C17.1694 12.3145 17.1694 12.0081 16.9798 11.8185Z"
      fill="currentColor"
    />
  ),
  ArrowCircleLeft: () => (
    <path
      d="M22 12C22 6.47581 17.5242 2 12 2C6.47581 2 2 6.47581 2 12C2 17.5242 6.47581 22 12 22C17.5242 22 22 17.5242 22 12ZM12 20.7097C7.21371 20.7097 3.29032 16.8347 3.29032 12C3.29032 7.21371 7.16532 3.29032 12 3.29032C16.7863 3.29032 20.7097 7.16532 20.7097 12C20.7097 16.7863 16.8347 20.7097 12 20.7097ZM11.496 16.9798L6.85484 12.3427C6.66532 12.1532 6.66532 11.8468 6.85484 11.6573L11.496 7.02016C11.6855 6.83065 11.9919 6.83065 12.1815 7.02016L12.4597 7.29839C12.6492 7.4879 12.6492 7.80242 12.4516 7.9879L9.00403 11.3145H16.6774C16.9435 11.3145 17.1613 11.5323 17.1613 11.7984V12.2016C17.1613 12.4677 16.9435 12.6855 16.6774 12.6855H9.00403L12.4556 16.0121C12.6492 16.2016 12.6532 16.5121 12.4637 16.7016L12.1855 16.9798C11.9919 17.1694 11.6855 17.1694 11.496 16.9798Z"
      fill="currentColor"
    />
  ),
} as const;

export type IconSVGPaths = keyof typeof Icons;

const Icon: React.FC<IconProps> = (props) => {
  const size = props.size !== undefined ? props.size : 'base';
  return (
    <div className={classNames('pso-icon', props.className)} data-component-id="C002">
      <svg
        width={dimensionsMap[size]}
        height={dimensionsMap[size]}
        viewBox={props.viewBox}
        alt={props.alt || props['aria-label'] || props.name}
        aria-label={props.alt || props['aria-label'] || props.name}
        aria-hidden={props['aria-hidden']}
        {...props}
      >
        {Icons[props.name]()}
      </svg>
    </div>
  );
};

Icon.defaultProps = {
  viewBox: '0 0 24 24',
  fill: 'none',
  xmlns: 'http://www.w3.org/2000/svg',
  'aria-hidden': true,
};

export default Icon;