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

8 lines
1.1 KiB
XML

<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 14C11.0376 14 13.5 11.5376 13.5 8.5C13.5 5.46243 11.0376 3 8 3C4.96243 3 2.5 5.46243 2.5 8.5C2.5 11.5376 4.96243 14 8 14ZM6.44589 6.73914C5.47022 6.88924 4.75 7.72874 4.75 8.71588V10.2842C4.75 11.2713 5.47022 12.1108 6.44589 12.2609L6.78354 12.3129C7.58977 12.4369 8.41023 12.4369 9.21646 12.3129L9.55411 12.2609C10.5298 12.1108 11.25 11.2713 11.25 10.2842V8.71588C11.25 7.72874 10.5298 6.88924 9.55411 6.73914L9.21646 6.68719C8.41023 6.56315 7.58977 6.56315 6.78354 6.68719L6.44589 6.73914Z" fill="black"/>
<circle cx="6.5" cy="8.5" r="0.75" fill="black"/>
<circle cx="9.5" cy="8.5" r="0.75" fill="black"/>
<path d="M8 11.25C8.51765 11.25 8.9618 10.9353 9.15164 10.4869C9.25928 10.2326 9.02614 10 8.75 10H7.25C6.97386 10 6.74072 10.2326 6.84836 10.4869C7.0382 10.9353 7.48235 11.25 8 11.25Z" fill="black"/>
<path d="M7 2.5C7 1.94772 7.44772 1.5 8 1.5C8.55228 1.5 9 1.94772 9 2.5V4.5C9 5.05228 8.55228 5.5 8 5.5C7.44772 5.5 7 5.05228 7 4.5V2.5Z" fill="black"/>
</svg>