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

6 lines
835 B
XML

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.25 10C9.25 9.58579 9.58579 9.25 10 9.25H12.5C12.9142 9.25 13.25 9.58579 13.25 10V17.5C13.25 17.9142 12.9142 18.25 12.5 18.25C12.0858 18.25 11.75 17.9142 11.75 17.5V10.75H10C9.58579 10.75 9.25 10.4142 9.25 10Z" fill="black"/>
<path d="M12 7.75C12.6904 7.75 13.25 7.19036 13.25 6.5C13.25 5.80964 12.6904 5.25 12 5.25C11.3096 5.25 10.75 5.80964 10.75 6.5C10.75 7.19036 11.3096 7.75 12 7.75Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12ZM3.5 12C3.5 16.6944 7.30558 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12Z" fill="black"/>
</svg>