Add Octicon SVG spritemap

[jolheiser]

To Do:

• Initial pass, swap out octicons for SVGs
• Go through and fix broken SVGs as noticed
• Fix outside functionality (JS)

[guillep2k]

make vendor?

[jolheiser]

This PR needs much more work before I look for approvals (sorry, just noticed I never marked as draft or WIP)

Currently I'm just gathering feedback on whether this seems like an acceptable solution. 😄

[jolheiser]

make vendor?

Interestingly, it's not picked up because of the build tag. 🤔

EDIT: Unless you were talking about the CI failure. 😅

[guillep2k]

Could you add some comments at the top of the script file with instructions on how to update the icons? I'm guessing it's like:

• Choose a new version of the library; update go.mod accordingly.
• make vendor to bring it up to date.
• Run the script with (insert exact go run command here).
• git add, commit...

[silverwind]

Github does publish a npm module for octicons at https://www.npmjs.com/package/@primer/octicons. You could npm install --save @primer/octicons and take the SVGs from the node_modules/@primer/octicons/build/svg directory for the build.

[jolheiser]

@silverwind I was going to do that, but they don't publish a sprite, so we would need to still make one somehow, or use them individually.

While I'm sure it's possible, someone more experienced with JS would likely need to do it.

[jolheiser]

Yet another alternative is to forego the script altogether and manually stitch together a sprite whenever we want to update.

[silverwind]

The output file could be optimized further with tools like https://github.com/svg/svgo. I guess a make svg step could output to web_src/build (which is in .gitignore) and SVGO CLI could be used for the final optimization step (npx svg <input> <output>) and output to public.

As for spritesheeting, I have used https://github.com/svgstore/svgstore in the past, but there are probably better tools around.

[jolheiser]

@silverwind I am using https://github.com/jkphl/svg-sprite, which apparently uses svgo in the output.

I will commit my changes once I have finished swapping out icons so that people can review. 😃

[silverwind]

@jolheiser ok. I see fill-rule and title in your output spritesheet. I think those could be eliminated by SVGO, they aren't really necessary.

[jolheiser]

I think this is more or less ready for review.
There were honestly far fewer mega-octicon than I expected, so if you'd rather I split up the template helper I can.
I considered not using a helper, but since now we need StaticUrlPrefix to access the sprite, I figured it would be easier to make the whole thing a helper.

I will definitely need feedback on the Makefile entry. I didn't include it in the webpack command since it's not likely to be modified often.
The library used to make the sprite claims to use svgo, but other than "minifying" I didn't see much difference.

And of course Drone is mad about PhantomJS, though I am unsure how exactly to resolve that...

[jolheiser]

That last one seems to have fixed it. 🎉

[silverwind]

I think you still need to add a entry for icons.svg to templates/pwa/serviceworker_js.tmpl.

[jolheiser]

@silverwind Done with both. I didn't add the {{MD5 AppVer}} to the end, as I doubt the icons will change often.
But I'm also not an expert at the serviceworker, so let me know if I should add it.

[silverwind]

{{MD5 AppVer}} there is not a choice and only needed when the actual request has it which is not the case here.

One more related improvement that might be good to have is a preload entry for it, e.g.

<link rel="preload" as="image" href="{{StaticUrlPrefix}}/img/svg/icons.svg">

[jolheiser]

@silverwind Done.

[silverwind]

Any more reviews here? I'm very excited to get SVG icons in personally 😉

[jolheiser]

Ping lgtm