[Icon] Add a fontSize prop which accepts default and inherit #11986
Conversation
| @@ -32,6 +31,12 @@ export const styles = theme => ({ | |||
| colorDisabled: { | |||
| color: theme.palette.action.disabled, | |||
| }, | |||
| fontSizeDefault: { | |||
There was a problem hiding this comment.
it probably makes more sense to set this inside root and remove the whole fontSizeDefault class, does it?
There was a problem hiding this comment.
@sakulstra We have been doing some back and forth here. This sounds like a good idea, I already had a use case required it. If you need it every single time, maybe you can consider the theme.overrides feature or after this pull request the theme.props feature.
Can we:
- Add this property to the Font component
- Update the TypeScript definitions
Thanks!
| @@ -32,6 +31,12 @@ export const styles = theme => ({ | |||
| colorDisabled: { | |||
| color: theme.palette.action.disabled, | |||
| }, | |||
| fontSizeDefault: { | |||
| @@ -48,6 +54,7 @@ function SvgIcon(props) { | |||
|
|
|||
| const className = classNames( | |||
| classes.root, | |||
| classes[`fontSize${capitalize(fontSize)}`], | |||
There was a problem hiding this comment.
Can be simplified following your previous comment.
There was a problem hiding this comment.
you mean like we do with color or sth more static like: classes.fontSizeInherit: fontSize === 'inherit'?
oliviertassinari
added
new feature
which font component?
Isn't this what I did here? https://github.com/mui-org/material-ui/pull/11986/files#diff-87364477e84c8259e0ccf7a194346096 I actually never used typeScript :/ |
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Icon/Icon.js Is the equivalent of the SvgIcon component but using the font icon.
👍 |
|
@oliviertassinari ah thanks for pointing out - never used the Icon component before :) Should be all fixed now. If I find some time, i'll have a look at the theme.override feature in another pr. |
@sakulstra It's a userland work only: const theme = createMuiTheme({
overrides: {
MuiSvgIcon: {
root: {
fontSize: 'inherit',
}
}
}
})After this pull request, you can do: const theme = createMuiTheme({
props: {
MuiSvgIcon: {
fontSize: 'inherit',
}
}
}) |
Argos? You need to run |
oliviertassinari
changed the title
increase size by 0.1kb
|
@sakulstra Great job! |
* feat(icons): add a fontSize prop which accepts default and inherit * add test * remove default Class * add fontSize to icon as well * add test for icon as well * regenerate api docs * increase size increase size by 0.1kb
I realized that in every project I use, I write a wrapper around
SvgIconto basically provide what @oliviertassinari suggested in #11493 (comment) so why not just open a pr to provide it :)