How can I use SVGR or another solution to import SVG inline in my React components on Astro?

[unique nexus]

.

[storm needle]

You can do this:

import svg from "./mysvg.svg?raw"

function MyComponent(props){
  return <span dangerouslySetInnerHTML={{ __html: svg }} />
}

You'd have a <span> wrapper on all your svgs for this solution

[spark charm]

dangerouslySetInnerHTML I have not needed to use this in a very long time

[storm needle]

the naming is just a bit odd imo, I use it all the time!

[unique nexus]

What does the ?raw do?

[storm needle]

It load assets as strings

[unique nexus]

Is it undocumented?

I can't find anything with a Google search or a search on the docs

[next grove]

It's a vite thing. You can see it mentioned here https://docs.astro.build/en/guides/styling/#raw-css-imports but the real source is here https://vitejs.dev/guide/assets.html#importing-asset-as-string 🙂

[stable vapor]

In our astro.config file, we import svgr from the vite-plugin-svgr package and pass it to vite.plugins so I believe an alternative to ?raw is using svgr directly.

[storm needle]

Thanks for sharing this

[upbeat pendant]

Just to increment the response, in the case someone wants to adopt this answner like me, the code from astro.config file should look something like this:

import { defineConfig } from 'astro/config';
import svgr from 'vite-plugin-svgr'

export default defineConfig({
    ..., // your other integrations
    vite: {
        plugins: [svgr()]
    }
});

From now, you can import your SVG's normally, like in the example bellow:
import { ReactComponent as DownArrow } from '@assets/icons/down_arrow.svg';