nextjs after page refresh and random interaction icons are oversizing

[oak93]

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):

• Browser [e.g. chrome, safari]: chrome
• Version: 101.0.4951.64