Stack Component

[Templarian]

Do we want to add support for overlaying icons?

• [ ] path array support
• [ ] size array support
• [ ] color array support

Usage:

<Icon path={[mdiFormatColorFill, mdiColorHelper]}
  color={[null, this.state.color]}/>

[mririgoyen]

I don't think there is a right answer here, but from a React point-of-view, I think it might make more sense to structure an overlay more like this:

import { Icon, Overlay } from '@mdi/react';
import { mdiCheckboxBlackCircle, mdiStar } from '@mdi/js';

...

<Overlay>
  <Icon path={mdiStar} color='yellow' spin />
  <Icon path={mdiCheckboxBlankCircle} color='black' />
</Overlay>

In this fashion, we could literally support all props and not have to mess with arrays and array ordering. It's also much clearer what is on top of what from just a quick pass.

I also personally like the term "Stack" better, since you can literally stack as many icons as you want, while an overlay typically is only one layer.

That's my 2¢.

[Templarian]

Agreed, I like that more, overloading isn't a normal react pattern, so this looks nicer.

[Templarian]

I'm starting to code it, and basically setting up how the final output will look like.

<Stack color="#444">
  <Icon path={mdiAccount}/>
  <Icon path={mdiBlockHelper} color="red"/>
<Stack>

<svg viewBox="0 0 24 24" style="width:1.5rem">
  <path d="M...Z" style="fill:#444"/>
  <path d="M...Z" style="fill:red"/>
</svg>

There may be some difficulty to calculate the size, but this seems like the best solution to just have Stack simply inherit properties to the children.

[Templarian]

Will need to update the docs so people know to use path:nth-child(2) { fill: red; } in their CSS if they are not using props.

[Templarian]

Note: If it's a single <Icon/> spread props to <svg/> and if it's a <Stack/> spread <Icon/> props to <path/> and <Stack/> spreads to <svg/>.

[Templarian]

Everything except for horizontal and vertical work now. I setup the unit tests, but still need to add a lot more unit tests for <Stack>.

[Templarian]

• <Stack/> is implemented. 😅 (not released just yet)
• Heavily cleaned up the code for readability.
• Updated all the <Icon/> unit tests.
• Need to update the <Stack/> unit tests (why it isn't released)
• https://templarian.github.io/@mdi/react/ has mobile support now for easier previewing.
• spin, vertical, horizontal and rotate can be mixed without issues now.

Really good progress, but going to work on unit tests a little more. Will release v1.0.0 once these unit tests are done.

[Templarian]

Closing this out. Feel free to open any issues if you see any bugs.

Will be wrapping up the v1.0.0 release for this Friday. Don't want to release such a drastic update until then so I'll have time support it this weekend.