Styled-Icons failing with styled-components dependencies

[JonathinK]

I don't know if you all are aware but, I think the styled-icons package is looking for any version of styled-components that is under the current version of 6.1.8. It is breaking the package. For now, I am disabling my Icons in the projects I am working on until this is fixed.
Thank you for all that you do cause I love styled-icons.

If you would like my errors from the terminal they are here:
While resolving: styled-icons@10.47.0
npm ERR! Found: styled-components@6.1.8
npm ERR! node_modules/styled-components
npm ERR! styled-components@"^6.1.8" from the root project
npm ERR! peer styled-components@"*" from @styled-icons/bootstrap@10.47.0
npm ERR! node_modules/@styled-icons/bootstrap
npm ERR! @styled-icons/bootstrap@"10.47.0" from styled-icons@10.47.0
npm ERR! node_modules/styled-icons
npm ERR! styled-icons@"^10.47.0" from the root project
npm ERR! 37 more (@styled-icons/boxicons-logos, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer styled-components@">=4.1.0 <6" from styled-icons@10.47.0
npm ERR! node_modules/styled-icons
npm ERR! styled-icons@"^10.47.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: styled-components@5.3.11
npm ERR! node_modules/styled-components
npm ERR! peer styled-components@">=4.1.0 <6" from styled-icons@10.47.0
npm ERR! node_modules/styled-icons
npm ERR! styled-icons@"^10.47.0" from the root project

[JonathinK]

Hey guys, just checking in to see if anyone else is having this issue. The CI still shows failing and the package is still broken. I will try to use other icon libraries available in styled-icons to see if they work. We are hitting the two-week mark with no response or updates. I am hitting the point in my projects where I need these Icons and I will be forced to not use styled-icons. Please just give me an update or a response so I know this is being looked into.

[jacobwgillespie]

Hey @JonathinK, I haven't had the time to maintain Styled Icons in quite a while, and you may even want to check out alternatives especially if you use TypeScript on your project - it turns out that every Styled Component instance adds overhead to TypeScript's type-checking, and with a library like an icon pack, that can result it a lot of extra work as the compiler checks each of the 1000s of icons.

One alternative you might be interested in is unplugin-icons: https://github.com/unplugin/unplugin-icons. It takes a different approach where it loads the icons you request dynamically, so there's not as much overhead to install or compile.

Or for that matter, if you find an icon you like from https://icones.js.org/, you can click to copy it as a React component or even as an unplugin-icons import.

https://react-icons.github.io/react-icons/ exists too, though it has some similar problems to Styled Icons (compile times can be long, you can end up bundling all the icons in your app by accident).

[JonathinK]

Oh my... Wow! Thank you for this information and I understand / I appreciate the response. I will look into the alternatives to choose the best option that fits my needs. Man, using styled-icons with styled-components was a killer combo.