Comments (8)
<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
androtate
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.
from materialdesign-react.
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ยข.
from materialdesign-react.
Agreed, I like that more, overloading isn't a normal react pattern, so this looks nicer.
from materialdesign-react.
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.
from materialdesign-react.
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.
from materialdesign-react.
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/>
.
from materialdesign-react.
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>
.
from materialdesign-react.
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.
from materialdesign-react.
Related Issues (20)
- How do you dynamically load an Icon? HOT 14
- Invariant Violation HOT 8
- Icon prop types do not allow assignment of onClick HOT 4
- Icon is using deprecated SFC type instead of FunctionComponent type HOT 1
- [Feature request] Add default class attribute to all svg elements HOT 2
- Dynamic load icons HOT 1
- Why '--save-dev'? HOT 1
- Icon path prop not accepting strings? HOT 1
- Incremented `id` doesn't play nicely w/ SSR HOT 9
- Add 'prop-types' as a dependency (or remove it) HOT 4
- Baseline flag HOT 1
- Change/Disabled role in svg icon HOT 1
- `spin` broken in Safari HOT 5
- Build error HOT 8
- Cannot assign to read only property 'width' of object '#<Object>' icon HOT 1
- add a view-box prop HOT 1
- Can't use 'onClick' on Icon in Typescript HOT 1
- Different styles of icons (rounded, sharp, outlined)
- Does this library still need to be maintained?
- Default import of Icon crushes production build HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from materialdesign-react.