status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/ui/imports/assets/icons/appearance.svg

12 lines
2.2 KiB
XML
Raw Normal View History

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-26 12:50:13 +00:00
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 18.25C12.4142 18.25 12.75 18.5858 12.75 19V21C12.75 21.4142 12.4142 21.75 12 21.75C11.5858 21.75 11.25 21.4142 11.25 21V19C11.25 18.5858 11.5858 18.25 12 18.25Z" fill="black"/>
<path d="M2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H5C5.41421 11.25 5.75 11.5858 5.75 12C5.75 12.4142 5.41421 12.75 5 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12Z" fill="black"/>
<path d="M18.25 12C18.25 11.5858 18.5858 11.25 19 11.25H21C21.4142 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4142 12.75 21 12.75H19C18.5858 12.75 18.25 12.4142 18.25 12Z" fill="black"/>
<path d="M12.75 3C12.75 2.58579 12.4142 2.25 12 2.25C11.5858 2.25 11.25 2.58579 11.25 3V5C11.25 5.41421 11.5858 5.75 12 5.75C12.4142 5.75 12.75 5.41421 12.75 5V3Z" fill="black"/>
<path d="M6.16656 5.10566C5.87367 4.81276 5.39879 4.81276 5.1059 5.10566C4.81301 5.39855 4.81301 5.87342 5.1059 6.16632L6.52011 7.58053C6.81301 7.87342 7.28788 7.87342 7.58077 7.58053C7.87367 7.28764 7.87367 6.81276 7.58077 6.51987L6.16656 5.10566Z" fill="black"/>
<path d="M16.4194 16.4194C16.7123 16.1265 17.1871 16.1265 17.48 16.4194L18.8943 17.8336C19.1871 18.1265 19.1871 18.6014 18.8943 18.8943C18.6014 19.1871 18.1265 19.1871 17.8336 18.8943L16.4194 17.48C16.1265 17.1871 16.1265 16.7123 16.4194 16.4194Z" fill="black"/>
<path d="M18.8941 6.16632C19.187 5.87342 19.187 5.39855 18.8941 5.10566C18.6012 4.81276 18.1263 4.81276 17.8334 5.10566L16.4192 6.51987C16.1263 6.81276 16.1263 7.28764 16.4192 7.58053C16.7121 7.87342 17.187 7.87342 17.4799 7.58053L18.8941 6.16632Z" fill="black"/>
<path d="M7.58062 16.4194C7.87352 16.7123 7.87352 17.1871 7.58062 17.48L6.16641 18.8943C5.87352 19.1871 5.39864 19.1871 5.10575 18.8943C4.81286 18.6014 4.81286 18.1265 5.10575 17.8336L6.51996 16.4194C6.81286 16.1265 7.28773 16.1265 7.58062 16.4194Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12Z" fill="black"/>
</svg>