IconOverlay

this component represent circle overlay around Icon component

API

Prop name	Type	Default	Required	Description
`color`	Brand & Text & Emotion Colors	`null`	no	Color variants
`background`	Background & Emotion Color dictionary	`null`	no	Background color variants
`size`	Size Extended dictionary + `xxlarge`	`medium`	no	is possible to use all Icon sizes
`UNSAFE_className`	`string`	`null`	no	Wrapper to custom classname

Example

examples

import { Icon, IconOverlay } from "@seduo/design-system";
...
<IconOverlay color="informative"
              background="informative"
              size="xsmall"
>
    <Icon name="graduation-cap-filled" size="small" />
</IconOverlay>
...
<IconOverlay  color="success"
              background="success"
              size="small"
>
    <Icon name="graduation-cap-filled"  size="small" />
</IconOverlay>
...
<IconOverlay  color="danger"
              background="danger"
              size="medium"
>
    <Icon name="graduation-cap-filled" />
</IconOverlay>
...
<IconOverlay  color="success"
              background="success"
              size="large"
>
    <Icon name="graduation-cap-filled" size="large"  />
</IconOverlay>
...
<IconOverlay  color="danger"
              background="danger"
              size="xlarge"
>
    <Icon name="graduation-cap-filled" size="xlarge"  />
</IconOverlay>
...
<IconOverlay  color="warning"
              background="warning"
              size="xxlarge"
>
    <Icon name="graduation-cap-filled" size="xxlarge"  />
</IconOverlay>

<IconOverlay color="informative"
             background="informative"
             size="xsmall"
>
    <Icon name="graduation-cap-filled" size="small" />
</IconOverlay>
...
<IconOverlay  color="success"
              background="success"
              size="small"
>
    <Icon name="graduation-cap-filled" size="small" />
</IconOverlay>
...
<IconOverlay  color="danger"
              background="danger"
              size="medium"
>
    <Icon name="graduation-cap-filled" size="medium" />
</IconOverlay>
...
<IconOverlay  color="success"
              background="success"
              size="large"
>
    <Icon name="graduation-cap-filled" size="large" />
</IconOverlay>
...
<IconOverlay  color="danger"
              background="danger"
              size="xlarge"
>
    <Icon name="graduation-cap-filled" size="xlarge" />
</IconOverlay>
...
<IconOverlay  color="warning"
              background="warning"
              size="xxlarge"
>
    <Icon name="graduation-cap-filled" size="xxlarge" />
</IconOverlay>