iot-svg-library

Reusable React SVG visualization components for IoT dashboards, industrial monitoring systems, telemetry platforms, SCADA-style interfaces, and real-time sensor UIs.

Installation

npm install iot-svg-library

React is a peer dependency, so consuming applications should provide their own react and react-dom versions.

Usage

import { TemperatureSVG, BatterySVG, SignalStrengthSVG } from 'iot-svg-library';

export function DashboardTile() {
  return (
    <TemperatureSVG
      value={30}
      unit="K"
      width={200}
      height={200}
      thresholds={{
        warning: 60,
        critical: 85,
      }}
    />
  );
}

Components

TemperatureSVG

<TemperatureSVG
  value={72}
  min={0}
  max={120}
  unit="C"
  thresholds={{ warning: 70, critical: 95 }}
  width={180}
  height={220}
/>

BatterySVG

<BatterySVG
  value={42}
  showPercentage
  thresholds={{ warning: 35, critical: 15 }}
  width={240}
  height={120}
/>

For low-value visuals such as batteries, pass thresholdMode="low" if you use the shared threshold helpers directly. The component already uses low-value thresholding by default.

SignalStrengthSVG

<SignalStrengthSVG
  strength={78}
  animated
  width={220}
  height={170}
/>

Styling And Themes

The library uses CSS Modules for component styles and CSS variables for theming. Import the generated CSS from your application when your bundler does not inject package CSS automatically:

import 'iot-svg-library/styles';

Theme variables are intentionally small and stable so applications can override them at the app boundary.

Development

npm install
npm run dev
npm run build
npm run preview
npm run validate

The playground runs through Vite and imports the local source. It is not part of the library entry and does not affect the published bundle.

Build Output

The package is configured for:

• ES module output for modern bundlers and tree shaking.
• UMD output for CDN-style browser usage.
• Sourcemaps for production debugging.
• Externalized React and ReactDOM to avoid duplicate React copies.

CDN Preparation

After publishing, a CDN consumer can load React, ReactDOM, and the UMD bundle through unpkg or jsDelivr:

<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>
<script src="https://unpkg.com/iot-svg-library/dist/iot-svg-library.umd.cjs"></script>
<link rel="stylesheet" href="https://unpkg.com/iot-svg-library/dist/iot-svg-library.css" />

<script>
  const root = ReactDOM.createRoot(document.getElementById('root'));

  root.render(
    React.createElement(IoTSVG.TemperatureSVG, {
      value: 72,
      unit: 'deg C',
      width: 220,
      height: 220,
      thresholds: {
        warning: 60,
        critical: 85,
      },
    }),
  );
</script>

The UMD global is IoTSVG.

The same files can be loaded from jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/iot-svg-library/dist/iot-svg-library.umd.cjs"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iot-svg-library/dist/iot-svg-library.css" />

Local Package Testing

This repository includes a separate consumer app in test-app/.

npm run build
cd test-app
npm install
npm run dev

Open http://localhost:5174. The test app installs the package via file:.., imports from iot-svg-library, and imports package CSS from iot-svg-library/styles.

npm link Testing

Use this workflow when you want a linked-package development loop:

npm run build
npm link
cd test-app
npm link iot-svg-library
npm run dev

After package changes, rerun npm run build in the library root. If the consumer dev server caches package files, restart npm run dev.

Package Validation

Before publishing, run:

npm run validate

This lints source files, builds the ES and UMD bundles, and runs npm pack --dry-run so you can inspect the files that would be published.

Publishing Checklist

1. Replace repository and homepage placeholders in package.json.
2. Replace the author placeholder in package.json.
3. Log in with npm login.
4. Run npm run validate.
5. Optionally create a local tarball with npm run pack:local.
6. Test test-app/.
7. Run npm publish --access public.

prepublishOnly runs validation automatically before npm publish.

Scope

This package only renders visualization components. Data transport, MQTT, WebSocket subscriptions, persistence, and dashboard state management belong in the consuming application.