iot-svg-library

Reusable React SVG widgets for IoT dashboards, SCADA screens, industrial telemetry, building-management systems, smart devices, healthcare monitoring, and real-time equipment status UIs.

The library gives you two ways to use every public free widget:

• Widget only: render just the SVG visual.
• Detail card: render the SVG plus a professional information panel with title, subtitle, metrics, progress, badges, custom styles, and actions.

The package is React-first, works with Vite/CRA/Next.js-style bundlers, and exports both ES module and UMD builds.

Install

npm install iot-svg-library

React is a peer dependency. Your app must already provide:

npm install react react-dom

Import the package CSS once in your app entry file:

import 'iot-svg-library/styles';

Local Package Testing

Use this when testing the library in another project before publishing.

npm install
npm run build
npm pack

This creates a file like:

iot-svg-library-1.6.0.tgz

Install it in another React project:

npm install F:/Widgets_Library/iot-svg-library-1.6.0.tgz

Then import the CSS once:

import 'iot-svg-library/styles';

Quick Start

import 'iot-svg-library/styles';
import { BatterySVG, MotorSVG, TankLevelSVG, TemperatureSVG } from 'iot-svg-library';

export default function Dashboard() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(180px, 1fr))', gap: 16 }}>
      <TemperatureSVG value={72} unit="C" />
      <BatterySVG value={84} />
      <TankLevelSVG value={64} />
      <MotorSVG speed={2240} status="running" />
    </div>
  );
}

Usage Modes

1. Widget Only

This is the default. If you do not pass pro, details, detail, showCard, or showDetails, the component renders only the SVG widget.

<MotorSVG value={68} speed={2240} status="running" width={260} height={180} />

2. Force Widget Only Even With Detail Data

Use this when your app already has card data but this screen needs only the visual widget.

<MotorSVG value={68} speed={2240} status="running" cardMode="widget" pro={{ label: 'Pump Motor M-204' }} />
<MotorSVG value={68} showCard={false} pro={{ label: 'Pump Motor' }} />
<MotorSVG value={68} cardMode="visual" details={{ label: 'Pump Motor' }} />
<MotorSVG value={68} cardMode="svg" detail={{ label: 'Pump Motor' }} />

3. Widget Only With Value Badge

When a widget is forced into widget-only mode while detail data exists, the library can show a small value badge over the SVG.

<BatterySVG value={84} cardMode="widget" widgetValueLabel="Charge" pro={{ label: 'UPS Battery' }} />
<BatterySVG value={84} cardMode="widget" showWidgetValue={false} pro={{ label: 'UPS Battery' }} />

4. Complete Detail Card

Pass pro, details, or detail as an object.

<MotorSVG
  value={68}
  speed={2240}
  status="running"
  lastUpdate="4s ago"
  pro={{
    label: 'Pump Motor M-204',
    subtitle: 'Cooling loop | Building 2',
    badge: 'Running',
    metrics: [
      { label: 'Load', value: 68, unit: '%', tone: 'primary' },
      { label: 'Speed', value: 2240, unit: 'rpm' },
      { label: 'Current', value: 18.6, unit: 'A' },
      { label: 'Status', value: 'Running', tone: 'running' },
    ],
    progress: { label: 'Motor Load', value: 68 },
  }}
/>

5. Enable A Card With Defaults

<TemperatureSVG value={32} unit="C" showCard />
<BatterySVG value={84} details />
<TankLevelSVG value={64} pro />

The shell automatically reads common props like value, level, signal, strength, speed, rpm, status, unit, config.value, config.unit, and lastUpdate.

Detail Card Props

These props are accepted by every exported free widget because the public components are wrapped with withWidgetDetails.

| Prop | Type | Description | | --- | --- | --- | | pro | boolean \| object \| array | Enables the detail card. Object gives full control. Array is treated as metric rows. | | details | boolean \| object \| array | Same as pro. | | detail | boolean \| object \| array | Same as pro. | | showCard | boolean | true forces card mode. false forces widget-only mode. | | showDetails | boolean | Alias-style prop for showCard. | | cardMode | string | card, detail, details show the card. widget, visual, svg show only the widget. | | label / title | string | Overrides the card title. | | subtitle | string | Overrides the card subtitle. | | lastUpdate / lastUpdated | string \| number \| Date | Shows last update text in the card header. | | cardClassName / cardStyle | string \| object | Style the card root in card mode. | | visualClassName / visualStyle | string \| object | Style only the SVG visual in card mode. | | showWidgetValue | boolean | Shows/hides the widget-only value badge. | | widgetValueLabel | string | Label for the widget-only value badge. | | widgetValueClassName / widgetValueStyle | string \| object | Style the widget-only value badge wrapper. |

Detail Object

The pro, details, and detail objects support the same fields.

<BatterySVG
  value={85}
  status="online"
  details={{
    label: 'Backup Battery',
    subtitle: 'UPS-B12 | Power room',
    lastUpdate: '2026-07-30 16:30',
    badge: { label: 'Online' },
    metrics: [
      { label: 'Charge', value: 85, unit: '%', tone: 'primary' },
      { label: 'Voltage', value: 48.7, unit: 'V' },
      { label: 'Runtime', value: 5.8, unit: 'h' },
    ],
    progress: { label: 'Charge', value: 85 },
  }}
/>

| Field | Type | Description | | --- | --- | --- | | label / title | string | Main card heading. | | subtitle / description | string | Supporting card text. | | value, valueLabel, unit | mixed | Primary value and unit for auto-generated metrics. | | quantity, quantityLabel, quantityUnit | mixed | Optional quantity metric. | | speed, speedLabel, speedUnit | mixed | Optional speed metric. Default speed unit is rpm. | | status, statusLabel | string | Status metric and accent fallback. | | metrics / fields / items | array \| object | Main metric tiles. | | summary, showSummary | object \| boolean | Header summary control. | | progress | object \| array | Progress bars. | | sections, showSections, expanded | array \| boolean | Extra grouped detail sections. | | badge / badges | string \| object \| array | Status pills. | | footer, actions | string \| ReactNode | Footer text and controls. | | layout / orientation | string | split, right, stacked, compact, inline, detail-card, details-card, info-card, asset-card. | | density | string | compact or comfortable. | | theme / variant | string | Use dark for dark card colors. | | accentColor | string | Main card accent color. | | tokens | object | Design-token overrides. | | styles | object | Inline styles for internal card parts. | | classNames | object | Classes for internal card parts. | | renderVisual | function | Custom renderer for the visual area. | | renderDetails | function | Custom renderer after metrics/progress/sections. | | valueFormatter | function | Custom metric value formatter. | | width, minWidth, minHeight, mobileMinHeight | number \| string | Card sizing controls. | | padding, gap, radius, background, border, shadow, fontFamily | number \| string | Card root design controls. | | showVisual | boolean | Hide/show the SVG visual inside detail-card layouts. | | visualHeight, visualRadius, visualBackground, visualShadow | number \| string | Visual panel design controls. | | metricColumns | string | CSS grid columns for metric tiles. | | maxVisibleMetrics, maxProgressItems | number | Limits visible metrics/progress rows. | | titleLines, subtitleLines | number | Text line clamps. | | showStatusDot | boolean | Show/hide colored status dot. | | dedupeSummaryMetric, dedupeSummaryProgress | boolean | Set false to keep duplicate summary data. |

Metric Formats

metrics={[
  { label: 'Temperature', value: 72, unit: 'C', tone: 'primary' },
  { label: 'Setpoint', value: 78, unit: 'C' },
  { label: 'Status', value: 'Warning', tone: 'warning' },
]}

metrics={{
  Temperature: { value: 72, unit: 'C', tone: 'primary' },
  Setpoint: { value: 78, unit: 'C' },
  Status: { value: 'Warning', tone: 'warning' },
}}

metrics={[
  ['Load', 68, '%'],
  ['Speed', 2240, 'rpm'],
]}

<MotorSVG value={68} details={[['Load', 68, '%'], ['Speed', 2240, 'rpm']]} />

Metric object fields include label, value, unit, tone, color, background, border, padding, radius, large, emptyText, render, style, and labelColor.

Custom Value Formatting

Use valueFormatter when you want complete control over displayed values.

<TemperatureSVG
  value={32.456}
  details={{
    label: 'Boiler Temperature',
    valueFormatter: (value, field) => {
      if (field.unit === 'C') return `${Number(value).toFixed(1)} deg C`;
      if (field.unit === '%') return `${Math.round(Number(value))}%`;
      return String(value);
    },
    metrics: [
      { label: 'Temperature', value: 32.456, unit: 'C', tone: 'primary' },
      { label: 'Humidity', value: 58.2, unit: '%' },
    ],
  }}
/>

Use render for a single metric:

<BatterySVG
  value={84}
  details={{
    label: 'UPS Battery',
    metrics: [{ label: 'Health', value: 92, render: () => <span style={{ color: '#22c55e' }}>Excellent</span> }],
  }}
/>

Custom Design

Custom Design With Tokens

<TankLevelSVG
  value={64}
  details={{
    label: 'Raw Water Tank',
    subtitle: 'Intake station',
    accentColor: '#0f766e',
    tokens: {
      text: '#102a43',
      muted: '#52606d',
      panel: '#f8fafc',
      visual: 'linear-gradient(180deg, #ecfeff 0%, #dbeafe 100%)',
      border: '1px solid rgba(15, 118, 110, 0.25)',
      shadow: '0 16px 36px rgba(15, 23, 42, 0.14)',
      metricBackground: '#ffffff',
      metricBorder: '1px solid rgba(15, 118, 110, 0.18)',
      metricPadding: '10px 12px',
      metricRadius: 8,
      radius: 8,
    },
  }}
/>

Supported token keys: text, muted, panel, visual, border, shadow, metricBackground, metricBorder, metricPadding, metricRadius, and radius.

Custom Design With Inline Part Styles

<MotorSVG
  speed={2240}
  status="running"
  details={{
    label: 'Pump Motor M-204',
    subtitle: 'Cooling loop',
    styles: {
      visual: { background: '#ecfeff' },
      content: { gap: 12 },
      title: { color: '#083344', fontSize: 18 },
      subtitle: { color: '#475569' },
      summary: { background: '#ccfbf1' },
      metrics: { gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' },
      metric: { background: '#ffffff' },
      metricLabel: { color: '#64748b' },
      metricValue: { fontSize: 16 },
      progressTrack: { height: 8 },
      progressBar: { background: '#0f766e' },
      footer: { borderTop: '1px solid #e2e8f0', paddingTop: 8 },
    },
  }}
/>

Common styles keys: visual, content, header, title, subtitle, lastUpdate, statusDot, summary, summaryLabel, summaryValue, badges, badge, metrics, metric, metricLabel, metricValue, progress, progressItem, progressHeader, progressTrack, progressBar, sections, section, sectionTitle, sectionGrid, footer, and actions.

Custom Design With CSS Classes

<TankLevelSVG
  value={64}
  details={{
    label: 'Raw Water Tank',
    classNames: {
      root: 'asset-card',
      visual: 'asset-card__visual',
      title: 'asset-card__title',
      metric: 'asset-card__metric',
      metricValue: 'asset-card__metric-value',
    },
  }}
/>

.asset-card { background: #f8fafc; border: 1px solid #dbeafe; }
.asset-card__metric { background: #ffffff; }
.asset-card__metric-value { color: #0f766e; }

Custom Root Card And Visual Styling

<BatterySVG
  value={84}
  showCard
  cardClassName="battery-card"
  cardStyle={{ maxWidth: 520 }}
  visualClassName="battery-card__svg"
  visualStyle={{ transform: 'scale(0.92)' }}
/>

When card mode is not enabled, normal className and style go directly to the SVG/widget root:

<BatterySVG value={84} className="plain-battery-widget" style={{ width: 240, height: 160 }} />

Layout Options

<MotorSVG value={68} details={{ layout: 'split', label: 'Pump Motor' }} />
<MotorSVG value={68} details={{ layout: 'right', label: 'Pump Motor' }} />
<MotorSVG value={68} details={{ layout: 'stacked', label: 'Pump Motor' }} />
<MotorSVG value={68} details={{ layout: 'compact', label: 'Pump Motor' }} />
<MotorSVG value={68} details={{ layout: 'inline', label: 'Pump Motor' }} />

Large asset-card style:

<BatterySVG
  value={85}
  status="online"
  details={{
    layout: 'detail-card',
    label: 'Backup Battery',
    subtitle: 'UPS-B12 | Power demo unit',
    badge: { label: 'Online' },
    metricColumns: 'repeat(3, minmax(0, 1fr))',
    metrics: [
      { label: 'Voltage', value: 48.7, unit: 'V' },
      { label: 'Runtime', value: 5.8, unit: 'h' },
      { label: 'Charge', value: 85, unit: '%', tone: 'primary' },
    ],
  }}
/>

Details-only card:

<BatterySVG
  value={85}
  details={{
    layout: 'asset-card',
    showVisual: false,
    label: 'Backup Battery',
    metrics: [
      { label: 'Charge', value: 85, unit: '%' },
      { label: 'Runtime', value: 5.8, unit: 'h' },
    ],
  }}
/>

Progress, Sections, Badges, Footer, Actions

<MotorSVG
  value={68}
  speed={2240}
  details={{
    label: 'Pump Motor M-204',
    badges: ['Running', { label: 'Critical Asset', color: '#ef4444', background: '#fee2e2' }],
    progress: [
      { label: 'Load', value: 68, color: '#14b8a6' },
      { label: 'Health', value: 92, color: '#22c55e' },
    ],
    maxProgressItems: 2,
    showSections: true,
    sections: [
      { title: 'Maintenance', rows: [{ label: 'Next Service', value: '12 Aug' }, { label: 'Technician', value: 'Assigned' }] },
      { title: 'Location', rows: { Plant: 'North', Area: 'Cooling Loop' } },
    ],
    footer: 'Auto mode enabled',
    actions: <button type="button">Open</button>,
  }}
/>

Progress item fields: label, value, percent, percentage, displayValue, color, trackColor, height, and style.

Custom Visual Or Custom Details

<MotorSVG
  value={68}
  details={{
    label: 'Pump Motor',
    renderVisual: ({ children }) => (
      <div style={{ display: 'grid', placeItems: 'center', width: '100%' }}>
        {children}
        <small style={{ color: '#64748b' }}>Live SVG</small>
      </div>
    ),
    renderDetails: ({ tokens }) => (
      <div style={{ color: tokens.muted, fontSize: 12 }}>Maintenance window: Friday 10:00 AM</div>
    ),
  }}
/>

Common Widget Props

| Prop | Type | Description | | --- | --- | --- | | width | number \| string | SVG width. Use numbers, pixels, percentages, or any CSS length. | | height | number \| string | SVG height. | | className | string | Class on the root SVG/widget in widget-only mode. | | style | object | Inline style on the root SVG/widget in widget-only mode. Some legacy widgets use style as config; see legacy notes. | | theme | string | Adds data-theme. Some widgets use it for styling. | | variant | string | Adds data-variant. minimal hides labels on supported widgets. | | status | string | Status such as online, offline, running, warning, or critical. | | accentColor | string | Main color override. | | thresholds | object | { warning, critical }; add { invert: true } when lower values are worse. | | title | string | Accessible title on supported widgets. Also card title when card mode is enabled. | | description | string | Accessible SVG description on supported widgets. | | config | object | Legacy config object used by older widgets. |

Thresholds

<TemperatureSVG value={72} thresholds={{ warning: 60, critical: 85 }} />
<BatterySVG value={18} thresholds={{ warning: 35, critical: 15, invert: true }} />
<TankLevelSVG value={92} thresholds={{ warning: 75, critical: 90 }} />

Status And Accent Colors

| Status | Default color | | --- | --- | | online, normal, running, active | Green | | idle | Gray | | offline, stopped | Slate | | warning | Amber | | critical, error, fault | Red |

<MotorSVG status="running" accentColor="#14b8a6" />
<MotorSVG status="running" details={{ accentColor: '#14b8a6', label: 'Pump Motor' }} />

Component Catalog

All public free components support widget-only and detail-card modes.

| Component | Main dynamic props | Example | | --- | --- | --- | | TemperatureSVG | value, min, max, unit, thresholds | <TemperatureSVG value={32} unit="C" /> | | BatterySVG | value, unit, showPercentage, thresholds | <BatterySVG value={68} /> | | StatusIndicator | status, signal, accentColor | <StatusIndicator status="online" signal={84} /> | | SignalStrengthSVG | strength, signal, value, thresholds | <SignalStrengthSVG strength={78} /> | | Tank / TankLevelSVG | value, level, capacity, unit, thresholds | <Tank value={68} /> | | Gauge / GuageSVG | value, pressure, temperature, thresholds | <Gauge value={68} /> | | Motor / MotorSVG | speed, rpm, status, accentColor | <Motor speed={2240} status="online" /> | | PipelineFlow / PipelineSVG | flowRate, status, accentColor, containerStyle, style config | <PipelineFlow flowRate={136} /> | | PipeI, PipeL, PipeT | Pipe shape props/config | <PipeL flowRate={50} /> | | AcSVG | config, live device event value, control state | <AcSVG config={{ isControllable: true }} /> | | AirSVG | sizing/styling | <AirSVG width={180} /> | | AirPurifierSVG | value | <AirPurifierSVG value={72} /> | | AmbulanceSVG | sizing/styling | <AmbulanceSVG width={160} /> | | AnalyzerSVG | sizing/styling | <AnalyzerSVG width={220} /> | | AqiSVG | value, config, AQI thresholds | <AqiSVG value={92} /> | | AqiScaleSVG | config, unit | <AqiScaleSVG config={{ unit: 'AQI' }} /> | | BarrageSVG | config, level/control state | <BarrageSVG config={{ color: '#38bdf8' }} /> | | BreakerSVG | config, control state | <BreakerSVG config={{ isControllable: true }} /> | | CurtainSVG | config, open/close state | <CurtainSVG config={{ isControllable: true }} /> | | DbDoorSVG | config, open/close state | <DbDoorSVG config={{ isControllable: true }} /> | | DoorLockSVG | config, lock state | <DoorLockSVG config={{ isControllable: true }} /> | | ConveyorBeltSVG | value | <ConveyorBeltSVG value={80} /> | | CoffeeMakerSVG | value | <CoffeeMakerSVG value={55} /> | | CeilingFanSVG | value | <CeilingFanSVG value={80} /> | | DoorBellSVG | value | <DoorBellSVG value={100} /> | | ElectricKettleSVG | value | <ElectricKettleSVG value={62} /> | | FireAlarmSVG | value | <FireAlarmSVG value={90} /> | | GeneratorSVG | sizing/styling | <GeneratorSVG width={240} /> | | GustSVG | sizing/styling | <GustSVG width={200} /> | | HeartMonitorSVG | sizing/styling | <HeartMonitorSVG width={180} /> | | HospitalBedSVG | sizing/styling | <HospitalBedSVG width={180} /> | | HospitalBuildingSVG | sizing/styling | <HospitalBuildingSVG width={180} /> | | HumiditySVG | sizing/styling | <HumiditySVG width={180} /> | | IlluminanceSVG | sizing/styling | <IlluminanceSVG width={180} /> | | InverterSVG | sizing/styling | <InverterSVG width={180} /> | | IVDripSVG | sizing/styling | <IVDripSVG width={180} /> | | KitchenScaleSVG | value | <KitchenScaleSVG value={45} /> | | LaptopBatterySVG | value | <LaptopBatterySVG value={76} /> | | LaundryBasketSVG | value | <LaundryBasketSVG value={64} /> | | LightSVG | config, on/off state | <LightSVG config={{ isControllable: true }} /> | | LineProgressSVG | config, progress value | <LineProgressSVG config={{ label: 'Load' }} /> | | MachineATMSVG | sizing/styling | <MachineATMSVG width={180} /> | | MedicalCrossSVG | sizing/styling | <MedicalCrossSVG width={180} /> | | MedicineBottleSVG | sizing/styling | <MedicineBottleSVG width={180} /> | | MicrowaveSVG | value | <MicrowaveSVG value={40} /> | | OvenHeatSVG | value | <OvenHeatSVG value={88} /> | | PackMachineSVG | config, control state | <PackMachineSVG config={{ isControllable: true }} /> | | ParkingSlotSVG | value | <ParkingSlotSVG value={1} /> | | PhoneChargingSVG | value | <PhoneChargingSVG value={78} /> | | PlantWateringSVG | value | <PlantWateringSVG value={38} /> | | PressureSVG | sizing/styling | <PressureSVG width={180} /> | | RadialProgressSVG | config, progress value | <RadialProgressSVG config={{ color: '#22c55e' }} /> | | RainSVG | sizing/styling | <RainSVG width={180} /> | | RefrigeratorSVG | value | <RefrigeratorSVG value={44} /> | | RobotArmSVG | value | <RobotArmSVG value={80} /> | | SecurityCameraSVG | value | <SecurityCameraSVG value={1} /> | | ServerRackSVG | value | <ServerRackSVG value={72} /> | | ShowerFlowSVG | value | <ShowerFlowSVG value={66} /> | | SmartPlugSVG | value | <SmartPlugSVG value={1} /> | | SoilTempretureSVG | sizing/styling | <SoilTempretureSVG width={180} /> | | SolarPanelSVG | value | <SolarPanelSVG value={82} /> | | StethoscopeSVG | sizing/styling | <StethoscopeSVG width={180} /> | | SyringeSVG | sizing/styling | <SyringeSVG width={180} /> | | ThermostatDialSVG | value | <ThermostatDialSVG value={23} /> | | ThreePhaseGuageSVG | value/config | <ThreePhaseGuageSVG value={68} /> | | ToasterSVG | value | <ToasterSVG value={55} /> | | TrafficLightSVG | value | <TrafficLightSVG value={2} /> | | UvSVG | sizing/styling | <UvSVG width={180} /> | | ValveSVG | config, open/close state | <ValveSVG config={{ isControllable: true }} /> | | VacuumCleanerSVG | value | <VacuumCleanerSVG value={72} /> | | WasteBinSVG | config, fill level state | <WasteBinSVG config={{ color: '#22c55e' }} /> | | WaterPumpSVG | value | <WaterPumpSVG value={1} /> | | WheelchairSVG | sizing/styling | <WheelchairSVG width={180} /> | | WashingMachineSVG | value | <WashingMachineSVG value={80} /> | | WifiRouterSVG | value | <WifiRouterSVG value={70} /> | | WindTurbineDynamicSVG | value | <WindTurbineDynamicSVG value={88} /> | | WindDirectionSVG | value/config | <WindDirectionSVG value={270} /> | | LegacyBatterySVG | legacy config/styling | <LegacyBatterySVG value={68} /> | | LegacySignalSVG | legacy config/styling | <LegacySignalSVG value={78} /> | | LegacyTankSVG | legacy config/styling | <LegacyTankSVG value={64} /> | | LegacyTemperatureSVG | legacy config/styling | <LegacyTemperatureSVG value={32} /> |

Daily-Life Dynamic Widgets

These widgets come from the same dynamic SVG factory. They accept value, width, height, className, and style.

<CoffeeMakerSVG value={72} width="100%" height={180} className="tile-svg" style={{ maxWidth: 240 }} />

Factory widgets: AirPurifierSVG, CeilingFanSVG, CoffeeMakerSVG, DoorBellSVG, ElectricKettleSVG, KitchenScaleSVG, LaptopBatterySVG, LaundryBasketSVG, MicrowaveSVG, OvenHeatSVG, PhoneChargingSVG, PlantWateringSVG, RefrigeratorSVG, ShowerFlowSVG, SmartPlugSVG, ThermostatDialSVG, ToasterSVG, VacuumCleanerSVG, WashingMachineSVG, and WifiRouterSVG.

Legacy Config Widgets

Some older industrial widgets accept a config object. Use it for device identifiers, parameter names, legacy live-event integration, and controllable states.

<ValveSVG
  width={220}
  height={160}
  config={{ deviceId: 'pump-room-1', param: 'valveOpen', isControllable: true, color: '#38bdf8' }}
/>

Common legacy config fields: deviceId, param, isControllable, color, label, unit, value, and status.

Important: for PipelineSVG/PipelineFlow, the style prop is used as pipe configuration such as rotateStep and thickness. Use containerStyle for normal root CSS styling.

<PipelineFlow flowRate={136} status="online" containerStyle={{ height: 80 }} style={{ rotateStep: 1, thickness: 3 }} />

Premium And Licensing Exports

import { LicenseProvider, PremiumTemperatureSVG, useLicense } from 'iot-svg-library';

<LicenseProvider licenseKey="YOUR_LICENSE_KEY">
  <PremiumTemperatureSVG value={32} unit="C" />
</LicenseProvider>

Utility Exports

import {
  SvgWrapper,
  clamp,
  getPercentage,
  polarToCartesian,
  describeArc,
  DEFAULT_THRESHOLDS,
  getStatus,
  getStatusColor,
  getStatusLabel,
  STATUS_COLORS,
  SVG_NAMESPACE,
} from 'iot-svg-library';

Use these only when building your own widgets on top of the library internals.

CDN Usage

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/iot-svg-library/dist/iot-svg-library.css" />
<script src="https://unpkg.com/iot-svg-library/dist/iot-svg-library.umd.cjs"></script>
<script>
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(React.createElement(IoTSVG.Tank, { value: 68, thresholds: { warning: 75, critical: 90 }, accentColor: '#14b8a6' }));
</script>

The UMD global is IoTSVG.

Complete Dashboard Example

import 'iot-svg-library/styles';
import { BatterySVG, MotorSVG, TankLevelSVG, TemperatureSVG } from 'iot-svg-library';

const cardStyle = { minWidth: 0 };

export default function Dashboard() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 16 }}>
      <TemperatureSVG
        value={72}
        unit="C"
        status="warning"
        cardStyle={cardStyle}
        details={{
          label: 'Boiler Temperature',
          subtitle: 'Thermal loop A',
          lastUpdate: '12:42 PM',
          badge: { label: 'Warning', color: '#f59e0b', background: '#fef3c7' },
          metrics: [
            { label: 'Temperature', value: 72, unit: 'C', tone: 'primary' },
            { label: 'Setpoint', value: 78, unit: 'C' },
            { label: 'Limit', value: 95, unit: 'C' },
          ],
          progress: { label: 'Heat Load', value: 72 },
        }}
      />

      <BatterySVG
        value={84}
        status="online"
        cardStyle={cardStyle}
        details={{
          label: 'UPS Battery Bank',
          subtitle: 'Power room',
          badge: 'Online',
          metrics: [
            { label: 'Charge', value: 84, unit: '%', tone: 'primary' },
            { label: 'Runtime', value: 5.8, unit: 'h' },
            { label: 'Voltage', value: 48.7, unit: 'V' },
          ],
        }}
      />

      <MotorSVG
        value={68}
        speed={2240}
        status="running"
        cardStyle={cardStyle}
        details={{
          label: 'Pump Motor M-204',
          subtitle: 'Cooling loop | Building 2',
          badge: 'Running',
          metrics: [
            { label: 'Load', value: 68, unit: '%', tone: 'primary' },
            { label: 'Speed', value: 2240, unit: 'rpm' },
            { label: 'Current', value: 18.6, unit: 'A' },
          ],
        }}
      />

      <TankLevelSVG value={64} cardMode="widget" widgetValueLabel="Level" width="100%" height={220} pro={{ label: 'Raw Water Tank' }} />
    </div>
  );
}

Development

npm install
npm run dev
npm run build
npm run lint
npm run validate

npm run validate runs linting, builds the library, and runs an npm pack dry run.

Publish Checklist

npm run validate
npm version patch
npm publish

Use npm version minor or npm version major when the release scope requires it.

Package Scope

This package renders visualization components only. It does not provide MQTT clients, WebSocket clients, database persistence, dashboard layout state, authentication, or device control APIs. Connect your own data layer and pass values/status/config into the widgets.

Recommended Handoff Notes

When sharing this library with another developer, tell them:

• Install iot-svg-library and import iot-svg-library/styles once.
• Use any widget directly for SVG-only mode.
• Pass details, detail, pro, or showCard for a complete card.
• Use cardMode="widget" when detail data exists but only the visual should render.
• Use metrics, progress, badges, sections, tokens, styles, and classNames for full custom value and design control.
• Keep data fetching, live subscriptions, and device commands in the consuming app.