Insurance Icons
Icons can be a great tool to support the message of text. This, however, only works when we know an icon's meaning from a previous experience. And even then we could associate something totally different with the icon.
For this reason one should never rely solely on icons to convey a message as not everybody might know the icon's meaning.
This set of icons has more detail in them than the normal icons and should thus
usually be used at larger sizes. On smaller sizes the level of detail actually
leads to the icon being less effectice. For this reason these icons are in the
big size by default.
Scales
| Demo | Icon Scale |
|---|---|
| small | |
| medium | |
| big | |
| huge | |
| gigantic |
Usage
All icons are available as named imports from the icons component:
import BusinessLiabilityInsuranceIcon from "@finanzchef24gmbh/design-system/InsuranceIcons/BusinessLiabilityInsuranceIcon";
<BusinessLiabilityInsuranceIcon />;
Scales
To render the icon in different sizes there is a scale prop that supports small,
medium and big as options.
import BusinessLiabilityInsuranceIcon from "@finanzchef24gmbh/design-system/InsuranceIcons/BusinessLiabilityInsuranceIcon";
<BusinessLiabilityInsuranceIcon scale="small" />;
<BusinessLiabilityInsuranceIcon scale="medium" />;
Bundlesize
In order to keep the bundlesize small you should import the icons directly and not use the named exports from the index file:
// Do
import BusinessLiabilityInsuranceIcon from "@finanzchef24gmbh/design-system/InsuranceIcons/BusinessLiabilityInsuranceIcon";
// Don't
import { BusinessLiabilityInsuranceIcon } from "@finanzchef24gmbh/design-system/InsuranceIcons";
All Icons
BuildingsInsuranceIcon
BusinessBankAccountIcon
BusinessLiabilityInsuranceIcon
CarInsuranceIcon
CombinedShopContentsInsuranceIcon
ConsultantIcon
CyberInsuranceIcon
DefaultIcon
DirectorsAndOfficersInsuranceIcon
EmptyStateIcon
LegalExpensesInsuranceIcon
MachineryBreakdownInsuranceIcon
MicroCreditIcon
NoResultIcon
OrganizerLiabilityInsurancesIcon
PrincipalsLiabilityInsuranceIcon
PrivateHealthInsuranceIcon
PropertyDamageLiabilityInsuranceIcon
TransportInsuranceIcon
WarningIcon