Illustration
Displays an illustration. Illustrations are fixed-size images (svgs) used in defined special cases.
Basic Usage
To implement the Illustration component, you need to import it first:
import { Illustration } from 'rades_react/src/components/Illustration';And use it:
<Illustration illustration="not-connected" />See API for all available options.
Illustrations
Status Page
These illustrations are currently only used on Status page to indicate interface, functionality or feature.
Ethernet Socket
Use for Ethernet Interface.
<Illustration illustration="ethernet-socket" />Hot Standby
Use for Hot Standby.
<Illustration illustration="hot-standby" />Info Bubble
Use for information for which we do not have specific illustration.
<Illustration illustration="info-bubble" />Internal
Generic icon from any internal status information.
<Illustration illustration="internal" />Network
Use for Network (Interface) related status.
<Illustration illustration="network" />Radio
Use for Radio Interface.
<Illustration illustration="radio" />RipEX2, RipEX2e, M!DGE3, M!DGE3e and WaSP
Use for Device information.
<Illustration illustration="device-mbm" /><Illustration illustration="device-mbm-e" /><Illustration illustration="device-mcm" /><Illustration illustration="device-mcm-e" /><Illustration illustration="device-wbm" />Routing
Use for Routing information, like Link management.
<Illustration illustration="routing" />Security
Use for Security information.
<Illustration illustration="security" />COM
Use for COM (Serial) Interface statuses like PPP.
<Illustration illustration="com" />USB
Use for USB Interface.
<Illustration illustration="usb" />VPN
Use for VPNs.
<Illustration illustration="vpn" />Misc
These illustrations are used on pages according to their description.
Not Connected
Use on connection lost page.
<Illustration illustration="not-connected" />Factory Reset
Use on factory reset page.
<Illustration illustration="factory-reset" />Total Purge
Use on total purge page.
<Illustration illustration="total-purge" />Enable to Configure
Use on all pages, where whole page functionality is deactivated using another configuration parameter.
<Illustration illustration="enable-to-configure" />Feature Unavailable
Use on all pages, where whole page functionality is disabled due to missing HW module or a Feature key.
<Illustration illustration="feature-unavailable" />Success & Error Circle
Used on success pages (like changes applied) or error pages (like API error modal). They do not support Custom Color.
<Illustration illustration="success-circle" />
<Illustration illustration="error-circle" />Warning sign
Use to display a warning.
<Illustration illustration="warning-sign" />Custom Color
You can change background color of all illustrations to any of supported component colors:
<Illustration color="danger" illustration="device-mcm" />
<Illustration color="warning" illustration="not-connected" />