Почему не отображается иконка на странице (закрывающий крестик) React

Question

Почему не отображается иконка на странице (закрывающий крестик) React

Рейтинг: 0Ответов: 1Опубликовано: 17.02.2023

// файл IconXMark.tsx


import type { SVGProps } from 'react';

const IconXmark = function IconXmark(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="m8 8 8 8M16 8l-8 8"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

export default IconXmark;

Подскажите, пожалуйста, где искать проблему, почему не отображается иконка Х, при этом отображается круглая?

Возможно, потому что она кнопка, а круглая как просто иконка) но как сделать, чтобы она появилась на странице?

import type { ComponentPropsWithRef, ReactNode } from 'react';
import { forwardRef } from 'react';
import Cluster from '@/components/LayoutCluster';
import Stack from '@/components/LayoutStack';
import Text from '@/components/Text';
import Button from '@/components/Button';
import IconXmark from '@/icons/IconXmark';
import IconCircleInfo from '@/icons/InfoCircle';
import IconCircleCheck from '@/icons/IconCircleCheck';
import IconTriangleExclamation from '@/icons/IconTriangleExclamation';
import cx from 'classnames';
import styles from './styles.module.scss';

export interface NotificationProps
  extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
  type?: 'default' | 'brand' | 'success' | 'warning' | 'danger' | 'error';
  elevated?: boolean;
  title: ReactNode;
  onClose?: () => void;
}

const mapIcon = {
  default: IconCircleInfo,
  brand: IconCircleInfo,
  success: IconCircleCheck,
  warning: IconTriangleExclamation,
  danger: IconTriangleExclamation,
  error: IconTriangleExclamation,
};

const Notification = forwardRef<HTMLDivElement, NotificationProps>(
  (
    {
      type = 'default',
      elevated = false,
      title,
      className,
      children,
      onClose,
      ...props
    },
    ref,
  ) => {
    const isClosable = typeof onClose === 'function';
    const handleCloseClick = () => {
      if (!isClosable) {
        return;
      }

      onClose();
    };

const Icon = mapIcon[type];

    return (
      <div
        {...props}
        ref={ref}
        className={cx(
          styles.notification,
          styles[`notification-type-${type}`],
          elevated && styles['notification-elevated'],
          className,
        )}
      >
        <Cluster nowrap justifyContent="space-between">
          <Cluster nowrap className={styles.content}>
            <Icon className={styles.icon} />

            <Stack gap="xs" alignItems="stretch" className={styles.content}>
              <Text block weight="500">
                {title}
              </Text>

              {children}
            </Stack>
          </Cluster>

          {isClosable && (
            <Button
              variant="control"
              className={styles.close}
              icon={<IconXmark />}
              onClick={handleCloseClick}
            />
          )}
        </Cluster>
      </div>
    );
  },
);

export default Notification;

reactjs typescript

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

вот мое решение, функцию, которая была изначально вообще убрала, теперь все работает и отображается:

// исправления в другом файле, куда подключается тот крестик-иконка

  const onClose = () => setHidden(true);

{!hidden &&  <Notification 
      title="Почему расчеты занимают время?" onClose={onClose}
      >
        <Text weight="400" className={styles.text}>
         Текст
        </Text>
        <div className={styles.buttonContainer} >
        <Button className={styles.notificationButton} 
         onClick={() => setHidden(true)}
        >
          ОК!
        </Button>
        </div>
      </Notification>}

// исправленный компонент button

    <Button
              variant="control"
              className={styles.close}
              icon={<IconXmark />}
              onClick={onClose}
            />

Почему не отображается иконка на странице (закрывающий крестик) React

Ответы