The icons package

@ds-workshop/icons v1.0.0

This is what the icons are meant to do and why we have them

Set background to:

Cli
Close
Code
Content
Copy
Custom
Docs
Edit
Editor
Filter
GitHub
Hamburger
Lab
Link
Migration
Organization
Profile
Roadmap
Search
Shield
Slack
Thinkmill
Twitter
Typescript
Updates
Watch
Welcome

Color

Icons will take on the color they inherit:

This is text 
This is text 
This is text 
<Stack>
    <div>
        This is text <Cli css={{ height: '3rem' }} />
        <Copy css={{ height: '3rem' }} />
        <Lab css={{ height: '3rem' }} />
    </div>
    <div style={{ color: 'rebeccapurple' }}>
        This is text <Cli css={{ height: '3rem' }} />
        <Copy css={{ height: '3rem' }} />
        <Lab css={{ height: '3rem' }} />
    </div>
    <div style={{ color: 'hotpink' }}>
        This is text <Cli css={{ height: '3rem' }} />
        <Copy css={{ height: '3rem' }} />
        <Lab css={{ height: '3rem' }} />
    </div>
</Stack><Stack>
    <div>
        This is text <Cli css={{ height: '3rem' }} />
        <Copy css={{ height: '3rem' }} />
        <Lab css={{ height: '3rem' }} />
    </div>
    <div style={{ color: 'rebeccapurple' }}>
        This is text <Cli css={{ height: '3rem' }} />
        <Copy css={{ height: '3rem' }} />
        <Lab css={{ height: '3rem' }} />
    </div>
    <div style={{ color: 'hotpink' }}>
        This is text <Cli css={{ height: '3rem' }} />
        <Copy css={{ height: '3rem' }} />
        <Lab css={{ height: '3rem' }} />
    </div>
</Stack>

Gradients

Icons can take one of the below gradients on:

grad1
grad2
grad3
grad4
grad5


<Stack orientation="horizontal">
    <Cli css={{ height: '5rem' }} look="grad1" />
    <Copy css={{ height: '5rem' }} look="grad2" />
    <Lab css={{ height: '5rem' }} look="grad3" />
    <Roadmap css={{ height: '5rem' }} look="grad4" />
    <Shield css={{ height: '5rem' }} look="grad5" />
</Stack><Stack orientation="horizontal">
    <Cli css={{ height: '5rem' }} look="grad1" />
    <Copy css={{ height: '5rem' }} look="grad2" />
    <Lab css={{ height: '5rem' }} look="grad3" />
    <Roadmap css={{ height: '5rem' }} look="grad4" />
    <Shield css={{ height: '5rem' }} look="grad5" />
</Stack>

Edit this page

.css-lvpt8t{--grad-1:var(--grad3-1);--grad-2:var(--grad3-2);background-image:linear-gradient(135deg, var(--grad-1), var(--grad-2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;padding-right:0.1em;}The icons package

Gradients

The icons package