Example components

The best way to understand the example components is through storybook:

npm run storybook:example

Now you can open http://localhost:9001 on browser and navigate through components to see their possible states. You can also see their code on index.stories.js inside each component folder.

Here's some components that could be tricky to use:

Icon

To add a new icon, just put share.svg file into the icons folder. Then, you can use it as <Icon icon="share" />.

To be able to have dynamic colors (i.e. changing SVG fill and stroke properties based on the color of the parent element) on the svg file, you'll probably need to change the svg code a little.

Consider the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
<circle style="fill:#000000" cx="20" cy="4" r="4" fill="#000000"/>
<circle style="fill:#000000" cx="20" cy="20" r="4" fill="#000000"/>
<circle style="fill:#000000" cx="4" cy="12" r="4" fill="#000000"/>
<polyline style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10" points="20,4 4,12 20,20 " fill="#000000"/>
</svg>

If we render it with the following rules:

const Paragraph = styled.p`
  color: red;
`

<Paragraph><Icon icon="share" /></Paragraph>

It will not render as we expect:

It happens because the SVG already has fill and stroke properties set to #000000. Let's remove them so we can control it from the Icon component:

  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
- <circle style="fill:#000000" cx="20" cy="4" r="4" fill="#000000"/>
+ <circle cx="20" cy="4" r="4"/>
- <circle style="fill:#000000" cx="20" cy="20" r="4" fill="#000000"/>
+ <circle cx="20" cy="20" r="4"/>
- <circle style="fill:#000000" cx="4" cy="12" r="4" fill="#000000"/>
+ <circle cx="4" cy="12" r="4"/>
- <polyline style="fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10" points="20,4 4,12 20,20 " fill="#000000"/>
+ <polyline style="fill:none;stroke-width:2;stroke-miterlimit:10" points="20,4 4,12 20,20 "/>
  </svg>

Now it renders as we want (red), but there're still red strokes around circles:

That happens because Icon sets not only fill but also stroke color with the currentcolor value. We need to set stroke="none" to fix that:

  <svg xmlns="http://www.w3.org/2000/svg" version="1.0" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">
- <circle cx="20" cy="4" r="4"/>
+ <circle cx="20" cy="4" r="4" stroke="none"/>
- <circle cx="20" cy="20" r="4"/>
+ <circle cx="20" cy="20" r="4" stroke="none"/>
- <circle cx="4" cy="12" r="4"/>
+ <circle cx="4" cy="12" r="4" stroke="none"/>
  <polyline style="fill:none;stroke-width:2;stroke-miterlimit:10" points="20,4 4,12 20,20 "/>
  </svg>

And now it renders properly: