@newhighsco/next-plugin-svgr
v3.0.162
Next.js plugin for transforming SVGs into React components using SVGR
0/weekUpdated 1 weeks agoISCUnpacked: 3.7 KB
Published by New High Score
npm install @newhighsco/next-plugin-svgrnext-plugin-svgr 
Next.js plugin for transforming SVGs into React components using SVGR
Installation
Install Next.js and @newhighsco/next-plugin-svgr:
``
npm install --save next @newhighsco/next-plugin-svgr
Usage
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 = () => (
<>
)
`
With TypeScript
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.