Icons
To replace the icons, you can provide render callbacks to the Vizzly.Dashboard
through React props.
import Vizzly from '@vizzly/dashboard';
const CustomComponent = () => <p>Your react component</p>
<Vizzly.Dashboard
renderUndoIcon={CustomComponent}
renderCompletedIcon={CustomComponent}
renderInProgressIcon={CustomComponent}
renderDeleteIcon={CustomComponent}
renderPlusIcon={CustomComponent}
renderCloseIcon={CustomComponent}
renderFilterIcon={CustomComponent}
renderEditIcon={CustomComponent}
renderComponentOptionsMenuIcon={CustomComponent}
renderMergeCellIcon={CustomComponent}
renderSplitCellIcon={CustomComponent}
renderDownloadIcon={CustomComponent}
renderInsertRowBelowIcon={CustomComponent}
renderInsertRowAboveIcon={CustomComponent}
renderAppendCellIcon={CustomComponent}
renderLibraryIcon={CustomComponent}
renderCreateComponentIcon={CustomComponent}
renderAccordionIcon={CustomComponent}
// Rest of the dashboard props ...
/>
To make improve the discoverability of replaceable icons, you can use the developerTools
prop
to highlight the icons which can be replaced with a red border.