Ikoner

const allIcons = [
  CloseIcon,
  CheckIcon,
  MinusIcon,
  PlusIcon,
  SearchIcon,
  HamburgerIcon,
  CalendarIcon,
  ArrowNorthEastIcon,
  ArrowUpIcon,
  ArrowDownIcon,
  ArrowRightIcon,
  ArrowLeftIcon,
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  CopyIcon,
  DotsIcon,
  DragIcon,
  GreenCheckIcon,
  QuestionIcon,
  RedCrossIcon,
  InfoIcon,
  ErrorIcon,
  WarningIcon,
  SuccessIcon,
  LinkIcon,
  TrashCanIcon,
];

const variant = 'medium';
const bold = false;

return (
  <div
    style={{
      display: "grid",
      gridTemplateColumns: "1fr 1fr 1fr 1fr",
      columnGap: "1rem",
      rowGap: "2rem",
      width: "100%",
    }}
  >
    {allIcons.map((Ico) => (
      <div title={Ico.displayName} key={Ico.name}>
        <Ico bold={bold} variant={variant} />
      </div>
    ))}
  </div>
);

const AnimatedIcon = ({ renderIcon, iconName }) => {
  const [state, setState] = React.useState(false);
  return (
    <>
      <div title={iconName || renderIcon.name}>{renderIcon(state)}</div>
      <div style={{ textAlign: "right" }}>
        <button
          data-density="compact"
          className="jkl-button jkl-button--tertiary jkl-spacing-2xl--left"
          onClick={() => setState(!state)}
        >
          Animér <span className="jkl-sr-only">{iconName}</span>
        </button>
      </div>
    </>
  );
};

const IconsExample = ({ choiceValues, boolValues }) => {
  const variant = 'medium';
  const bold = false;

  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        columnGap: "1rem",
        rowGap: "2rem",
        width: "100%",
      }}
    >
      <AnimatedIcon
        renderIcon={(isDown) => (
          <ArrowVerticalAnimated
            bold={bold}
            pointingDown={isDown}
            variant={variant}
          />
        )}
        iconName={ArrowVerticalAnimated.displayName}
      />
      <AnimatedIcon
        renderIcon={(isRight) => (
          <ArrowHorizontalAnimated
            bold={bold}
            pointingRight={isRight}
            variant={variant}
          />
        )}
        iconName={ArrowHorizontalAnimated.displayName}
      />
      <AnimatedIcon
        renderIcon={(isPlus) => (
          <PlusRemoveAnimated bold={bold} isPlus={isPlus} variant={variant} />
        )}
        iconName={PlusRemoveAnimated.displayName}
      />
    </div>
  );
};

render(<IconsExample />);