Overriding icons

You can override icons according to your icons set in the app. Here's an example how to render a custom react component instead of built in icons:

// DialectNotificationComponent.tsx
'use client';

import '@dialectlabs/react-ui/index.css';

import { SVGProps } from 'react';
import { DialectSolanaSdk } from '@dialectlabs/react-sdk-blockchain-solana';
import {
  Icons,
  NotificationTypeStyles,
  NotificationsButton,
} from '@dialectlabs/react-ui';

const DAPP_ADDRESS = '...';

// Override a set of icons in the Icons variable before using dialect component
Icons.Close = (props: SVGProps<SVGSVGElement>) => {
  // render your close icon instead of the default one
  return null;
}

export const DialectSolanaNotificationsButton = () => {
  return (
    <DialectSolanaSdk dappAddress={DAPP_ADDRESS}>
      <NotificationsButton />
    </DialectSolanaSdk>
  );
};

Here's the full list of built in icons:

export const Icons = {
  Loader: SpinnerDots,
  Settings: SettingsIcon,
  ArrowLeft: ArrowLeftIcon,
  ArrowRight: ArrowRightIcon,
  Close: CloseIcon,
  Bell: BellIcon,
  BellButton: BellButtonIcon,
  BellButtonOutline: BellButtonIconOutline,
  Trash: TrashIcon,
  Xmark: XmarkIcon,
  Resend: ResendIcon,
  Wallet: WalletIcon,
};