New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Improve Font Awesome integration #22496
[docs] Improve Font Awesome integration #22496
Conversation
5804a73
to
079c7c5
Compare
<Icon className="fa fa-plus-circle" color="secondary" /> | ||
<Icon className="fa fa-plus-circle" style={{ color: green[500] }} /> | ||
<Icon className="fa fa-plus-circle" fontSize="small" /> | ||
<Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fa is deprecated
@@ -7,20 +7,21 @@ import Icon from '@material-ui/core/Icon'; | |||
const useStyles = makeStyles((theme: Theme) => | |||
createStyles({ | |||
root: { | |||
'& > .fa': { | |||
'& > *': { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
generic selector
@@ -217,8 +216,7 @@ export const styles = (theme) => { | |||
deleteIcon: { | |||
WebkitTapHighlightColor: 'transparent', | |||
color: deleteIconColor, | |||
height: 22, | |||
width: 22, | |||
fontSize: 22, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Needed to support font icons
079c7c5
to
9ad0552
Compare
9ad0552
to
a85f753
Compare
@chrislambe Thanks |
As suggested in #17754 (comment).
Wanted to point out a couple things to focus on:
I had to add three packages to the
docs
workspace (@fortawesome/{fontawesome-svg-core,free-solid-svg-icons, react-fontawesome}
) following the precedent set in theTextField
docs: https://material-ui.com/components/text-fields/#integration-with-3rd-party-input-librariesMy
FontAwesomeSvgIconDemo.tsx
won't compile as written. It seems to be due to the declaration of theFontAwesomeSvgIcon
component in the module. Here's the error:Compiler error
I was able to work around this by creating the
FontAwesomeSvgIcon
component in theFontAwesomeSvgIconDemo
component (viauseMemo
) but that caused a failure in the linter about prop types, so I reverted to declaring the component at the module root. Interestingly, ifyarn docs:typescript
was running and had already successfully compiled the demo once, it didn't have a problem, which is how I was able to complete the demo in the first place.Otherwise I think it's ready for review!
Closes #17754