Logo
Displays a Logo. Logos are images (svgs) used to quickly identify the device brand and type the user is connected to.
⚠️ Logo component will be made private thus only allowing use as part of another component. Until we get it done, logo component may only be used in defined situations like login form and app header.
Logo size is defined in design and passed to the image via props. The logo will take up all the available space if there is no height or width provided. It is recommended to constrain only the needed value and let the logo calculate the other. For example: while using logo in app header you should only constrain height.
☝️ Special care needs to be taken when sizing a logo to ensure it remains clearly readable.
Blank
🤔 This only applies to device logos.
We use device illustration instead of logos for blank devices. Illustrations are provided the same way as logos, with "blank" suffix.
Logos are named according to API docs.
Implementation
To implement the Logo component, you need to import it first:
import { Logo } from 'rades_react/src/components/ui/Logo';And use it:
<Logo logo="mbm-racom" />See API for all available options.
Available Logos
RACOM
RACOM company logo.
<Logo logo="racom" />Device Logos
Individual product logos.
RipEX2
RACOM
<Logo logo="mbm-racom" />Blank
<Logo logo="mbm-blank" />RipEX2e
RACOM
<Logo logo="mbm-e-racom" />Blank
<Logo logo="mbm-e-blank" />M!DGE3
RACOM
<Logo logo="mcm-racom" />Blank
<Logo logo="mcm-blank" />M!DGE3e
RACOM
<Logo logo="mcm-e-racom" />Blank
<Logo logo="mcm-e-blank" />WaSP
RACOM
<Logo logo="wbm-racom" />