topology_view_icons

Canvas-drawn network topology device icons for Flutter. Provides a TopoIconPainter CustomPainter with 10 device types in 2 visual styles (flat and LNM hardware).

Features

• 10 device types + port: Network (cloud), Switch, Host, Agent, Router, Firewall, Server, Generic, Unknown, Switch Unknown
• 2 icon styles: Flat (minimal, blue/red) and LNM (hardware illustration)
• Normal + Error states for each icon
• Pure Canvas drawing — no SVG files, no asset loading, no parsing overhead
• Scales to any size — all coordinates are relative to bounds

Usage

import 'package:topology_view_icons/topology_view_icons.dart';

// Use as a CustomPaint widget
CustomPaint(
  size: const Size(80, 80),
  painter: TopoIconPainter(
    deviceType: TopoDeviceType.switch_,
    isError: false,
    style: TopoIconStyle.flat,
  ),
)

Device Types

Icon Styles

• TopoIconStyle.flat — Minimal flat icons. Normal: blue (#4B7BEC), Error: red (#E74C3C).
• TopoIconStyle.lnm — Hardware-style illustrations matching LNM network management UI. Uses chassis greys, navy blues, teal/coral LEDs.

Port Icon

The port uses a separate TopoPortPainter with richer state control:

CustomPaint(
  size: const Size(80, 80),
  painter: TopoPortPainter(
    isUp: true,        // link up (green) vs link down (grey)
    isDisabled: false,  // admin down (dark grey) — overrides isUp
    style: TopoIconStyle.flat,
    direction: PortDirection.up,  // up, down, left, right
  ),
)

Port Direction

Use PortDirection to rotate the port icon for different positions around a device:

Example

Run the interactive gallery:

cd example
flutter run -d chrome

The gallery lets you toggle between Flat/LNM styles, Normal/Error states, and adjust icon size with a slider.