import React from 'react';
import { IconGallery, IconItem, Meta } from '@storybook/addon-docs/blocks';
import SvgIcon from '@mui/material/SvgIcon';
import { AvIcons } from './Icons/LegacyUIKitFonts';
import * as Actions from './Icons/Actions';
import * as Common from './Icons/Common';
import * as Files from './Icons/Files';
import * as Form from './Icons/Form';
import * as Navigation from './Icons/Navigation';
import * as Payment from './Icons/Payment';

<Meta title="Components/Icon/Legacy Glyphicons" isTemplate/>

# Legacy Glyphicons

`availity-uikit` glyphs previously approved by UX.

<IconGallery>
  {AvIcons.map((icon) => (
    <IconItem key={icon.uid} name={icon.css}>
      {icon.svg ? (
        <SvgIcon viewBox={`0 0 ${icon.svg?.width || '1000'} 1000`}>
          <path d={`${icon.svg?.path}`} />
        </SvgIcon>
      ) : (
        <div>NO SVG</div>
      )}
    </IconItem>
  ))}
</IconGallery>