Convert ERB octicon() helpers to inline SVG on the fly

[shawnbot]

Fixes #840?!

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

[colebemis]

@shawnbot This is neat! Would the the code block contain the code before or after this transformation happens? It seems like we'll end up displaying <svg>...</svg> instead of <%= octicon "check" %>

[shawnbot]

@shawnbot This is neat! Would the the code block contain the code before or after this transformation happens? It seems like we'll end up displaying <svg>...</svg> instead of <%= octicon "check" %>

@colebemis Right now it adds an comment before the HTML, but making react-live convert it on the fly is much trickier.

[colebemis]

Gotcha. FYI, @broccolini, @emplums and I discussed using octicons-react for the Primer CSS code examples instead of fighting with the erb templates.

[simurai]

Hmmm.. it doesn't seem that the examples get rendered:

When trying locally, I can see a bunch of

Replacing 3 ERB block(s)...

[shawnbot]

While we work out the Now deployment issues, you can preview this PR here:

https://primer-css-axktenytcr.now.sh/css/components/toasts

[shawnbot]

We can delete this if/when #857 lands alongside this.

Suggested change

import '@primer/octicons/index.scss'

[shawnbot]

Okay @simurai, when you're back this is ready to test out and review. 🙏

[shawnbot]

And @colebemis, circling back on your comments above:

IMO, it'd be great if there could be two "tabs" for each of our ERB examples: one with the original ERB in tact for folks to copy and paste without editing; and the other static HTML, which we'd generate from this.

/cc @feministy who had some good feedback on the comments that this outputs. 😁

[jonrohan]

Looks good 👍