How to import two classes with the same name in JavaScript ES6 and React

I love using HeroIcons and there’s even a version specifically for React: @heroicons/react.

But I encountered a problem the other day, I needed to use both the solid filled and outline version of the same icon within one of my pages.

This means importing like this.

import { EnvelopeIcon } from "@heroicons/react/24/solid"
import { EnvelopeIcon } from "@heroicons/react/24/outline"

But you’ll get the following error:

SyntaxError: Identifier 'EnvelopeIcon' has already been declared

So how to fix it? That’s what the icons are called. The function that returns them calls them that. I can’t change that.

But actually, we can change that using the following syntax.

import { EnvelopeIcon } from "@heroicons/react/24/solid"
import { EnvelopeIcon as EnvelopeIconOutline } from "@heroicons/react/24/outline"

We simply add as AnyNewNameYouCanThinkOf after the named import. They’re different now and it works. Fixed!