Plugin for Next to automatically be able to transform svg files into components using the excellent svgr library.
npm install --save next-svgrOr using yarn:
yarn add next-svgrThen, import the library in your next.config.js file.
// next.config.js
const withSvgr = require("next-svgr");
module.exports = withSvgr({
// your config for other plugins or the general next.js here...
});Or you can use it with next-compose-plugins for a cleaner configuration.
// next.config.js
const withPlugins = require("next-compose-plugins");
const withSvgr = require("next-svgr");
module.exports = withPlugins([
withSvgr
// your other plugins here
]);You can now start importing your SVG files as if they were components:
import MyIcon from "./myicon.svg";
export default () => (
<div>
<MyIcon />
</div>
);Please check the documentation of svgr for more examples.