This content originally appeared on DEV Community 👩💻👨💻 and was authored by Cassidy Williams
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!
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Cassidy Williams
Cassidy Williams | Sciencx (2023-01-06T22:32:02+00:00) Importing SVG files as React components with Vite. Retrieved from https://www.scien.cx/2023/01/06/importing-svg-files-as-react-components-with-vite/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.