I convert .svg file into React component using svgr lib. The template the following:

const template = ({ componentName, jsx, props }, { tpl }) => {
  const name = `${componentName.replace('Svg', '')}Icon`;

  return tpl`
      import { SVGProps } from 'react';

      export const ${name} = (${props}) => (
        ${jsx}
      );
`;
};

Then I make a story and render a list of icons:

import * as AllIcons from '../../../../icons/src';

const icons = Object.values(AllIcons);

export const Default: Story = {
  args: {
    width: 24,
    height: 24,
    color: 'common.black',
  },
  render: ({ color, width, height, ...rest }) => {
    return (
      <List>
          {icons.map((Icon) => {
            return (
              <Stack>
                <Icon width={width} height={height} {...rest} />
                <Typography>
                  {Icon.name}
                </Typography>
              </Stack>
            );
          })}
      </List>
    );
  },
};

On localhost everyting is fine but when I build Storybook then Icon.name gets minifined so I endup with a list of icons with names like a | bx | ee .... Is there a way I can keep icons names intact?