Closed Templarian closed 6 years ago
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¢.
Agreed, I like that more, overloading isn't a normal react pattern, so this looks nicer.
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.
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.
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/>
.
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>
.
<Stack/>
is implemented. 😅 (not released just yet)<Icon/>
unit tests.<Stack/>
unit tests (why it isn't released)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.
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.
Do we want to add support for overlaying icons?
path
array supportsize
array supportcolor
array supportUsage: