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!