Importing SVG files as React components with Vite

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!

Importing SVG files as React components with Vite

Enter vite-plugin-svgr

Enter `vite-plugin-svgr`