FortAwesome / react-fontawesome

Font Awesome React component
https://fontawesome.com
MIT License
3.67k stars 264 forks source link

nextjs after page refresh and random interaction icons are oversizing #512

Open oak93 opened 2 years ago

oak93 commented 2 years ago

Describe the bug we are using fontawesome kit to use icons in our nextjs project. it works great but after some page refreshes, randomly, icons size are oversizing. we have seen this issue #134 but it only provides a solution for those who use the library instead of the kit. (also again this documentation only includes solution with library, link) Is there any chance of fixing this issue by using the kit? Could not find anything under settings panel of the kit dashboard. thank you

we are using this solution to fix the issue by including this code in our base.css file. but it feels hacky.

/*
 * FontAwesome on page refresh and after some interaction oversizing issue workaround.
 * @see https://github.com/FortAwesome/react-fontawesome/issues/134
 */
.svg-inline--fa {
  height: 1em;
  vertical-align: -0.125em;
}

Expected behavior icons should not oversize unexpectedly when refreshing and some random button clicks.

Desktop (please complete the following information):