Combine all icons into one file?

[automattic]

Combine all icons into one file?

[beaucollins]

Another option is to have a folder of icons whose index.js required and exported each one:

// icons/index.js

import Trash from './trash'
import Back from './back'
import Plus from './plus'

export { Trash, Back, Plus }

Then where you're using them you could import only what you were using:

import { Trash } from './icons'

render() {
   return <Trash />
}

Or reference all of them:

import * as Icons from './icons'

render: function() {
   return <Icons.Trash />
}

[srgpqt]

While this can certainly be done, I don't see the benefit?

[beaucollins]

I think @drw158 is trying to reduce the amount of characters to type when putting in icons.

[srgpqt]

Doesn't seem like much of a benefit. There aren't that many icons per component.

[davewhitley]

Yep, the main benefit is reducing the amount of work when creating new components. Instead of searching for the icon you need, looking up the icon name, and then adding an import for each one, you could just import the entire set. Beau's solution would probably be better for long term than what we have now.

It's not a lot of trouble now because we only have a handful of icons, but it's possible that we'll add more. If it becomes cumbersome, we can reopen this issue.