<link> elements in <Head> break FontAwesome(!) #20682
Description
Bug report
Describe the bug
As much as the title might sound almost facetious - it is not. It's a very difficult bug for me to figure out, but it seems to be related to next-head-count or something about how Next.js is parsing tags inside . I have tried to reproduce it with create-react-app but cannot. The bug occurs in production builds as well.
The only difference I can see with vs no is that the .svg-inline--fa class (inside <style> element, it seems) is never loaded, and that next-head-count is changing.
To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
- Create Next.js app
- Install packages:
npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome - Modify _app.tsx:
import Head from "next/head";
import { faUser } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import "../styles/globals.css";
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link rel="foo" href="bar" />
</Head>
<div>
hello world <FontAwesomeIcon icon={faUser} />
</div>
</>
);
}
export default MyApp;Expected behavior
The icon is shown as it should be.
Actual behavior
The icon is huge.
Screenshots
System information
- OS: Windows 10 20H2 19042.685 x64
- Browser: Edge Chromium
- Version of Next.js: 10.0.4
- Version of Node.js: v15.5.0
- Deployment: all
Additional context
You can probably guess what happens when I try to add <link rel="apple-touch-icon" href="/images/app-icon.png" /> to my web apps...