Server-side icon rendering? about styled-icons

[jacobwgillespie]

I don't think so, the way you're doing imports looks correct to me!

[bildungsroman]

Closing this issue as adding gatsby-plugin-styled-components per @jacobwgillespie 's advice fixed my issues!

[jacobwgillespie]

It should be, yes - usually when I've experienced something like this in the past, it's an issue where Styled Components isn't fully integrated with the framework's server-side rendering.

Do you have a link to a repo, either the one you're seeing the error or a small reproduction? Or if not, can you share any details about how you've set up Gatsby?

If you haven't already, you may want to set up gatsby-plugin-styled-components: https://www.gatsbyjs.com/plugins/gatsby-plugin-styled-components/

[bildungsroman]

The repo in question is private, but I can talk about how it's set up.

I'm not using gatsby-plugin-styled-components but I will try that now. At the moment I have the following dependencies installed:

// package.json
    "@styled-icons/fa-brands": "^10.26.0",
    "@styled-icons/fa-solid": "^10.26.0",

and am importing the icons into components as I need them:

// component.jsx

import { ExternalLinkAlt } from '@styled-icons/fa-solid';

const ComponentName = () => {
  return (
    <Wrapper>
      ...
      <a href=''><ExternalLinkAlt className='icon' />Click me</a>
    </Wrapper>
  );
};

export default ComponentName;

[jacobwgillespie]

Perfect, thanks for the additional info - yeah if you're using Gatsby and haven't installed gatsby-plugin-styled-components, then I would expect you to be seeing the flash of unstyled icons that you are seeing, Gatsby needs that plugin to properly server-render any Styled Components style. 👍

Let me know if you're still seeing the issue after setting up that plugin and I'd be happy to investigate.

[bildungsroman]

That makes sense. Should I change how I'm doing imports within my components?