Directly render SVG paths

[silverwind]

When clicking through pages, I observe SVGs flashing because apparently the icon rendering needs to wait on the ajax request done in JS to succeed. To prevent this, we should directly render the <path>s without <use> both on server and client which does require a bit of parsing of the generated spritemap but should otherwise be possible.

[silverwind]

For the client side, we can probably just pre-generate a JSON file to be included in the webpack build based on node_modules/@primer/octicons/build/data.json, possibly extensible to include more icon sets for the future. For server-side, I'm not sure what the best method of building a JSON structure into the binary would be.

[silverwind]

I think we can do it like this:

• make a function that loads public/img/svg/icons.svg from either FS or bindata on startup
• make that function parse the spritesheet to a map and expose a function to get a SVG via name
• render the full SVG in the svg helper

The client-side only uses like 5 octicons, I think we can just hardcode them there for now. Maybe later create a separate bindata chunk for SVG as it does not need to be in public.

Instead of a spritesheet, it could also just output a easy to parse JSON structure, like https://github.com/kinoheld/webpack-svg-to-json-plugin/blob/master/svg-to-json.js.