Chances are if you’ve ever used create-react-app and you wanted to import an SVG file as a React component, you did something like this and it Just Worked™:

import { ReactComponent as Logo } from "./logo.svg";

But, alas, if you have moved to using Vite more often, as I have, you can’t just do that.

Never fear, it’s still possible!

Enter vite-plugin-svgr

vite-plugin-svgr is a Vite plugin to transform SVGs into React components! It’s super intuitive to use:

npm install vite-plugin-svgr

Add it to your vite.config.js:

import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [svgr()],
  // ...
};

And boom, you get your expected behavior!

// somewhere in your React + Vite app

import { ReactComponent as WhateverIcon } from "./icons/WhateverIcon.svg";

// ...

export default function SomeComponent() {
  return (
    <div>
      <WhateverIcon />
      Wow, I love icons, because I am a dweeb
    </div>
  );
}

This is particularly useful if you’re using a library like MUI and you need to use a custom icon, like so:

// somewhere in your React + Vite app

import { Box, IconButton, SvgIcon } from "@mui/material";
import { ReactComponent as WhateverIcon } from "./icons/WhateverIcon.svg";

// ...

export default function SomeComponent() {
  return (
    <Box>
      <IconButton aria-label="some icon">
        <SvgIcon>
          <WhateverIcon />
        </SvgIcon>
      </IconButton>
      Wow, I love icons, because I am a dweeb
    </Box>
  );
}

There’s other things you can do with vite-plugin-svgr, and there’s a list of options here.

Hope that’s helpful for ya, happy icon-ing!