mdx^Σ=2

A decade ago, Chris Coyier from CSS-Tricks described ways to consume SVG, which can be distilled into two groups: to link and to embed.

Fast forward to 2022, the market has shifted from WordPress+PHP to React+TypeScript, but the same dilemma “to link or to embed?” still applies because, at the bottom of it, we’re still dealing with the same HTML and CSS as we did a decade ago.

So what’s the best way to import SVG in MDX?

Syntax highlighting is done using either highlight.js or prism.js. Once you’ve picked one, you’ll have to set it up for code blocks: 1. within MDX and 2. outside MDX. That’s how it works on all kinds of frameworks, not just Remix, although I’ll post examples for Remix.

This setup is mostly a trivial task; however, there are a few niggles worth mentioning.