Combine all icons into one file?

[davewhitley]

This would make requiring icons easier. Instead of requiring each icon one by one, we could just require one component.

For example:

var Icon = require( 'components/simplenote-icons' );

render: function() {
    return <Icon icon="trash" />;
}

Not sure how to do this though, it's a bit over my head.

[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.