Encourage individual icon component usage by removing Icon/index.js

[djfarrelly]

Issue

Including the Icon/index.js file encourages importing all icons through a single path:

import { Unknown, Negative } from '@bufferapp/ui/Icon';

Using this approach may feel easier, but bloat the webpack bundle. All Icons account for the biggest contributor of the webpack bundle.

Analyzing one webpack bundle recently, the ui library accounts for 132k, 41k is the Icon directory if it's imported through the path '@bufferapp/ui/Icon'. Comparatively, an individual Icon is between 0.5-1k and the next biggest component is Select at 16k. The average app likely does not use every single Icon. With them all being inline SVGs, this contributes to the bloat.

Idea

1. Remove the Icon/index.js file to prevent engineers from importing and destructuring.
2. Reduce the number of nested directories for simpler importing path

// we end up with this:
import CheckmarkIcon from '@bufferapp/ui/Icons/Checkmark';
// instead of this
import CheckmarkIcon from '@bufferapp/ui/Icon/Icons/Checkmark';
// or this
import { Checkmark } from '@bufferapp/ui/Icons';

Caveats

Dead code webpack plugins could potentially remove the unused Icons, but that requires more processing and instead making this change would remove the work from webpack by encouraging better practices for our team. 😄

[souviknsl07]

@djfarrelly I would like to work on this issue.