Embed SVGs into DOM

[FFawzy]

We need to embed the SVGs into the DOM and not use them via the img tag to be able to adjust the styling

[FFawzy]

inject the font face statement into the svg by css of the site

this suggestion cannot be done since currently the svg is not loaded inline in the HTML but through the external file in an img tag as seen below

will explore the other option

[FFawzy]

load the SVG in the img component and hack it there

Gatsby now supports SVGs through a library called SVGR

I'll dig through it to see if it will satisfy our needs more details to come

[FFawzy]

after discussion with @nkuehn we decided that this issue will require a bigger refactor so we will push it back to the backlog and as a temp fix for go live we will export SVGs with text as paths

[nkuehn]

copypasta of the slack message this was discussed in (maybe not as big a refactor as thought). In any case it could make sense to do this only after MDX v2 migration.

to be able to inject style into the SVGs from the DOM the SVG has to be inline in the DOM, not an tag (not even with a data URL as the source). So we can either take the MDX centric approach or a webpack centric one (or combine them). But there’s a third, client side option too: https://github.com/tanem/react-svg it could be used inside a custom component that we provide to MDX (if that is still possible after the magic remark-images plugin has done its work)

[gabriele-ct]

We need to research a little more about the requirements and use cases