ArrowIcon

Directional arrow glyph (up / down / left / right) used by sortable headers, breadcrumbs, and toggles.

import { ArrowIcon } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`isOpen`	Optional	`boolean \| undefined`	—	—
`size`	Optional	`string \| number \| undefined`	—	Sets both width and height
`color`	Optional	`string \| undefined`	—	Only affects single-color icons (default: 'currentColor')
`children`	Optional	`undefined`	—	—

Usage

A collection of domain-specific SVG icon components plus the createIcon factory for authoring new icons. All icons share a consistent IconProps interface and are built with React.forwardRef.

`IconProps`

Prop	Type	Required	Default	Description
`size`	`number \| string`	no	—	Sets both `width` and `height`
`color`	`string`	no	`'currentColor'`	Fill/stroke color (only affects single-color icons)
`width`	`number \| string`	no	icon default	Override width independently
`height`	`number \| string`	no	icon default	Override height independently

All other SVGAttributes<SVGElement> props are forwarded to the <svg> element.

Available Icons

Sidebar navigation: DashboardNavIcon, AlertsNavIcon, FarmsNavIcon, ExplorerNavIcon, FinancialsNavIcon, InventoryNavIcon, MinersOverviewNavIcon, OperationsNavIcon, PoolManagerNavIcon, ReportingNavIcon, SettingsNavIcon, UserManagementNavIcon, CabinetWidgetNavIcon, ContainerWidgetsNavIcon

Status / alarm: ErrorStatusIcon, OfflineStatusIcon, SleepStatusIcon, MiningStatusIcon, FluidAlarmIcon, OfflineAlarmIcon, OtherAlarmIcon, PressureAlarmIcon, TemperatureAlarmIcon, AlertTriangleIcon

Miner card / stats: HashrateCardIcon, HashrateStatIcon, MinersStatIcon, BtcCardIcon, EfficiencyIcon, FrequencyIcon, FanIcon, PowerIcon, ConsumptionIcon, ModeIcon, TemperatureIndicatorIcon, TemperatureCelsiusIcon

Weather: CloudyIcon, PartlyCloudyIcon, RainThunderIcon, RainyIcon, SnowyIcon, SunnyIcon, TemperatureWeatherIcon

Navigation / UI: ArrowIcon, RightArrowIcon, RightNavigateIcon, MenuIcon, PinIcon, UnPinIcon, ExportIcon, ScaleControlIcon, NotificationBellIcon, SettingsHeaderIcon, SignOutIcon, LiveIcon

Misc: ActionsTickIcon, CommentIcon, CommentIconCommon, CoolingDropIcon, DecreaseIcon, IncreaseIcon, FarmAlertIcon, FarmStarIcon, GoogleIcon, MinerExplorerIcon, MinerOverviewIcon, SiteOverviewIcon, UserAvatarIcon, VolumeOffIcon, VolumeOnIcon, ProfitArrowIcon, ProductionDataIcon, PoolsIcon

`createIcon` factory

Use createIcon to define new SVG icons that automatically follow the IconProps interface.

`CreateIconOptions`

Field	Type	Required	Description
`displayName`	`string`	yes	Component display name
`viewBox`	`string`	yes	SVG viewBox
`defaultWidth`	`number`	no	Default width (defaults to `24`)
`defaultHeight`	`number`	no	Default height (defaults to `24`)
`multiColor`	`boolean`	no	When `true`, disables single-color fill
`path`	`ReactNode \| ((props: { color: string }) => ReactNode)`	yes	SVG path(s)

Example

/** * Runnable example for Icons — a representative selection of exported icon components. */import {  AlertTriangleIcon,  ArrowIcon,  DashboardNavIcon,  FanIcon,  HashrateCardIcon,  NotificationBellIcon,  PowerIcon,  SunnyIcon,} from '@tetherto/mdk-react-devkit'const IconRow = ({ children }: { children: React.ReactNode }) => (  <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>{children}</div>)const IconSample = ({ label, children }: { label: string; children: React.ReactNode }) => (  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>    {children}    <span style={{ fontSize: 11, color: 'var(--mdk-color-text-secondary, #888)' }}>{label}</span>  </div>)export const IconsExample = () => (  <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>    {/* Default size (24px) */}    <IconRow>      <IconSample label="DashboardNavIcon">        <DashboardNavIcon />      </IconSample>      <IconSample label="AlertTriangleIcon">        <AlertTriangleIcon />      </IconSample>      <IconSample label="HashrateCardIcon">        <HashrateCardIcon />      </IconSample>      <IconSample label="FanIcon">        <FanIcon />      </IconSample>      <IconSample label="SunnyIcon">        <SunnyIcon />      </IconSample>      <IconSample label="ArrowIcon">        <ArrowIcon />      </IconSample>      <IconSample label="NotificationBellIcon">        <NotificationBellIcon />      </IconSample>      <IconSample label="PowerIcon">        <PowerIcon />      </IconSample>    </IconRow>    {/* Custom sizes */}    <IconRow>      <IconSample label="size=16">        <DashboardNavIcon size={16} />      </IconSample>      <IconSample label="size=24">        <DashboardNavIcon size={24} />      </IconSample>      <IconSample label="size=32">        <DashboardNavIcon size={32} />      </IconSample>    </IconRow>    {/* Custom colours */}    <IconRow>      <IconSample label="default color">        <AlertTriangleIcon size={24} />      </IconSample>      <IconSample label="color=#FF9500">        <AlertTriangleIcon size={24} color="#FF9500" />      </IconSample>      <IconSample label="color=#4ADE80">        <AlertTriangleIcon size={24} color="#4ADE80" />      </IconSample>      <IconSample label="color=#F87171">        <AlertTriangleIcon size={24} color="#F87171" />      </IconSample>    </IconRow>  </div>)