icon-builder: build indexes for icons

[tony]

#1057 (comment)

Will have a PR this week for this. It will work for material-ui and user generated svg's.

[tony]

@hai-cea / @jkruder I am not up to speed with how require works on web builds.

Is it true that adding an index.js to svg-icons folders (like we if we wanted to use mui.SvgIcon.Access.Accessibility would end up having all svg icons loaded ?

Is there anything that node / webpack / browserify does to optimize / allow lazy-evaluation of require's when inside of .index.js?

I believe the idea of index.js is great from a readability standpoint. Having to pick out and require icons one by one runs contrary to the fact we're prototyping to ship ASAP. However, the cost of having every svg pulled into builds makes this unfeasible.

[jkruder]

@tony The src/index.js would not include the svg-icons explicitly. The index.js files would go under each directory within svg-icons so that folks can pull in a theme of icons and not the entire set of icons. If we had an index.js under svg-icons/navigation the require could look like:

let NavigationIcons = require('[relative path to node_modules]/node_modules/material-ui/lib/svg-icons/navigation/');
let { ArrowDown, ArrowUp } = NavigationIcons;

In this scenario only the Navigation icons have been pulled in. This is really only useful for folks who are consuming MUI. Internally we will still explicitly reference the icons we need so as not to pull in a large portion of the svg-icons.

In regards to how require's work, there are no dynamic requires using browserify (which this framework uses). So if there are 100 requires in an index, all 100 will be brought in regardless of how many are actually used.

[oliviertassinari]

Resolved by #1959