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
743 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="M18 12C18 14.7614 15.7614 17 13 17C10.2386 17 8 14.7614 8 12C8 9.23858 10.2386 7 13 7C15.7614 7 18 9.23858 18 12ZM16.5 12C16.5 13.933 14.933 15.5 13 15.5C11.067 15.5 9.5 13.933 9.5 12C9.5 10.067 11.067 8.5 13 8.5C14.933 8.5 16.5 10.067 16.5 12Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 7C2 4.79086 3.79086 3 6 3H18C20.2091 3 22 4.79086 22 7V17C22 19.2091 20.2091 21 18 21H6C3.79086 21 2 19.2091 2 17V7ZM6 4.5H18C19.3807 4.5 20.5 5.61929 20.5 7V17C20.5 18.3807 19.3807 19.5 18 19.5H6C4.61929 19.5 3.5 18.3807 3.5 17V7C3.5 5.61929 4.61929 4.5 6 4.5Z" fill="black"/>
</svg>