Custom icons for the RecordingControls component.
All icons in the RecordingControls can be replaced with custom React nodes. This allows you to use any icon library or custom SVG icons.
import { FaRecordVinyl, FaStop, FaCog, FaClosedCaptioning, FaFilm, FaMagic } from 'react-icons/fa';const customIcons: Partial<RecordingControlsIcons> = { record: <FaRecordVinyl />, stop: <FaStop />, settings: <FaCog />, transcribe: <FaClosedCaptioning />, compose: <FaFilm />, summary: <FaMagic />,};<RecordingControls icons={customIcons} onStartRecording={handleStart} onStopRecording={handleStop} /> Copy
import { FaRecordVinyl, FaStop, FaCog, FaClosedCaptioning, FaFilm, FaMagic } from 'react-icons/fa';const customIcons: Partial<RecordingControlsIcons> = { record: <FaRecordVinyl />, stop: <FaStop />, settings: <FaCog />, transcribe: <FaClosedCaptioning />, compose: <FaFilm />, summary: <FaMagic />,};<RecordingControls icons={customIcons} onStartRecording={handleStart} onStopRecording={handleStop} />
Compose option icon
Record button icon
Settings/options button icon
Stop button icon
Summary option icon
Transcribe option icon
Custom icons for the RecordingControls component.
Remarks
All icons in the RecordingControls can be replaced with custom React nodes. This allows you to use any icon library or custom SVG icons.
Example