Transform your svg image to a React component.
- Svg properties
- React props and events
yarn add next-react-svg -E
Note Supports Next.js >= 12
Create a next.config.js
in your project and pass an include
to define the svg folder localization.
const path = require('path');
/**
* @type {import('next-react-svg').NextReactSvgConfig}
*/
const nextReactSvgConfig = {
include: path.resolve(__dirname, 'src/assets/svg'),
};
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
// ...
};
const withReactSvg = require('next-react-svg')(nextReactSvgConfig);
module.exports = withReactSvg(nextConfig);
import Logo from 'assets/svg/Logo.svg';
export default () => <Logo />;
Create an additional.d.ts
file at the root of your project. Add the following reference:
/// <reference types="next-react-svg" />