Export multiple elements from a single file in React

Let's assume that you want to export multiple elements from a unique file in React. For instance, let's suppose that you create a file to store multiple icons.

Icons.js

jsx
import React from 'react'

const UpIcon = () => {

    return(
        <span>🆙</span>
    )
}

const HeartIcon = () => {

    return(
        <span>💖</span>
    )
}

export { HeartIcon, UpIcon }

Now, you can import the icons into another React file as components.

App.js

jsx
import React                 from 'react'
import { UpIcon, HeartIcon } from './icons'

const App = () => {

    return(
        <div>
            <p>This is the first icon: <UpIcon/></p>
            <p>This is the second icon: <HeartIcon/></p>
        </div>
    )

}

export default App

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.