Pascal Precht 17e9e30454 feat: introduce StatusIcon component
This introduces a new `StatusIcon` component to the component library,
including various icon assets.

The component can be used to render icons in different colors and rotations.
It's also one of the atomic components that can be used to build other
more complex components like icon buttons.

Usage:

```
StatusIcon {
    icon: "arrow-right" // name of asset file in `ui/shared/status/assets/img/icons
    width: 24 // default: 24
    height 24 // default: 24
    color: "red" // default: asset file color
    rotation: 0 // default: 0
}
```

Closes #2330
2021-04-27 14:56:09 -04:00

5 lines
805 B
XML

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 9C10.7909 9 9 10.7909 9 13V18C9 20.2091 10.7909 22 13 22H18C20.2091 22 22 20.2091 22 18V13C22 10.7909 20.2091 9 18 9H13ZM18 10.5H13C11.6193 10.5 10.5 11.6193 10.5 13V18C10.5 19.3807 11.6193 20.5 13 20.5H18C19.3807 20.5 20.5 19.3807 20.5 18V13C20.5 11.6193 19.3807 10.5 18 10.5Z" fill="black"/>
<path d="M14.25 7C13.8358 7 13.5 6.66421 13.5 6.25V6C13.5 4.61929 12.3807 3.5 11 3.5H6C4.61929 3.5 3.5 4.61929 3.5 6L3.5 11C3.5 12.3807 4.61929 13.5 6 13.5H6.25C6.66421 13.5 7 13.8358 7 14.25C7 14.6642 6.66421 15 6.25 15H6C3.79086 15 2 13.2091 2 11V6C2 3.79086 3.79086 2 6 2H11C13.2091 2 15 3.79086 15 6V6.25C15 6.66421 14.6642 7 14.25 7Z" fill="black"/>
</svg>