Skip to main content

Icon Prop

The icon prop is an object used to configure what icons are shown on the UpupUploader client component. It is optional.

Each icon element must be a valid React element that accepts an optional className prop for styling.

info

Recommended icon library suites include:

KeyExampleTypeStatusDefault Value
CameraCaptureIconicons={{CameraCaptureIcon: FaCamera}}FC<{ className?: string }>optionalTbCapture
CameraDeleteIconicons={{CameraDeleteIcon: MdDelete}}FC<{ className?: string }>optionalTbTrash
CameraRotateIconicons={{CameraRotateIcon: FaCameraRotate}}FC<{ className?: string }>optionalTbCameraRotate
ContainerAddMoreIconicons={{ContainerAddMoreIcon: IoAdd}}FC<{ className?: string }>optionalTbPlus
FileDeleteIconicons={{FileDeleteIcon: TiDelete}}FC<{ className?: string }>optionalTbTrash
LoaderIconicons={{LoaderIcon: TbLoader2}}FC<{ className?: string }>optionalTbLoader

CameraCaptureIcon

Custom icon for the camera capture button.

Example override:

import { FaCamera } from 'react-icons/fa'

<UpupUploader
icons={{
CameraCaptureIcon: FaCamera
}}
/>

CameraDeleteIcon

Icon for removing captured camera images.

CameraRotateIcon

Button to switch between front/back camera.

ContainerAddMoreIcon

Icon shown in the "Add More Files" button. Appears when multiple uploads are allowed.

FileDeleteIcon

Icon for removing selected files from the list.

LoaderIcon

Animated icon shown during file processing.

Customization example:

import { ImSpinner8 } from 'react-icons/im'

<UpupUploader
icons={{
LoaderIcon: ImSpinner8
}}
/>

All icons inherit the component's dark mode styling automatically through the className prop when provided.