@newhighsco/next-plugin-svgr NPM | npm.io

3.0.144 • Published 9 months ago

Install

Weekly downloads

507

License

ISC

Repository

Last release

9 months ago

next-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:

// next.config.js
const withSvgr = require('@newhighsco/next-plugin-svgr')
module.exports = withSvgr({
  svgrOptions: {
    /* config options here */
  }
})

In your code:

import starUrl, { ReactComponent as Star } from './star.svg'

const App = () => (
  <>
    <img src={starUrl} alt="star" />
    <Star />
  </>
)

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:

declare module '*.svg' {
  import { FC, SVGProps } from 'react';
  export const ReactComponent: FC<SVGProps<SVGSVGElement>>;

  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.

Options

See options supported by SVGR

CHANGELOG

@svgr/webpack file-loader url-loader

@infinitebrahmanuniverse/nolb-_new @everything-registry/sub-chunk-644 @zalastax/nolb-_new

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago