Next.js plugin for transforming SVGs into React components using SVGR
npm install @newhighsco/next-plugin-svgrNext.js plugin for transforming SVGs into React components using SVGR
Install Next.js and @newhighsco/next-plugin-svgr:
```
npm install --save next @newhighsco/next-plugin-svgr
Create a next.config.js in your project:
`js`
// next.config.js
const withSvgr = require('@newhighsco/next-plugin-svgr')
module.exports = withSvgr({
svgrOptions: {
/ config options here /
}
})
In your code:
`jsx
import starUrl, { ReactComponent as Star } from './star.svg'
const App = () => (
<>
>
)
`
In your next-env.d.ts file (or in another type declaration file of your choosing that's within the include section of your tsconfig.js), simply add the following:
`tsx
declare module '*.svg' {
import { FC, SVGProps } from 'react';
export const ReactComponent: FC
const src: string;
export default src;
}
``
This notifies the compiler of the 2 possible ways you're able to import and use SVG files with this plugin integrated.