Блог

Я использую героиконы в своих Next.js проект и поскольку в настоящее время он не поддерживает динамический импорт (путем передачи имени значка компоненту) Я создал свой собственный компонент.

 // HeroIcon.tsx
import * as SolidIcons from '@heroicons/react/solid';
import * as OutlineIcons from '@heroicons/react/outline';

interface Props {
  icon: string;
  color?: string;
  size?: number;
  outline?: boolean;
}

export const HeroIcon = (props: Props): JSX.Element => {
  const { icon, color, size, outline = false } = props;

  const { ...icons } = outline ? OutlineIcons : SolidIcons;

  // @ts-ignore
  const Icon: JSX.Element = icons[icon];

  const classes = [
    `${color ? color : 'text-black'}`,
    `h-${size ? size : 6}`,
    `w-${size ? size : 6}`
  ];

  return (
    // @ts-ignore
    <Icon className={classes.join(' ')} />
  );
};
 

и я могу позже использовать его как таковой:

 <HeroIcon icon='CogIcon' color='text-blue-600' size={6} outline />
 

Пока он работает на моем сервере разработки:

в тот момент, когда я создаю проект npm run build и начинаю его, npm start я вместо этого получаю этот результат:

а на мобильных устройствах значки вообще не видны.

Страница предварительно отрисована с помощью SSG и использует оба getStaticPaths и getStaticProps .

Есть идеи, в чем может быть причина?