Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/platypusrex/next-plugin-svgr
Next.js plugin for SVGR
https://github.com/platypusrex/next-plugin-svgr
nextjs svgr webpack
Last synced: 7 days ago
JSON representation
Next.js plugin for SVGR
- Host: GitHub
- URL: https://github.com/platypusrex/next-plugin-svgr
- Owner: platypusrex
- License: mit
- Created: 2020-03-14T00:49:54.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-19T22:55:48.000Z (4 months ago)
- Last Synced: 2024-09-19T23:19:23.852Z (about 2 months ago)
- Topics: nextjs, svgr, webpack
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/next-plugin-svgr
- Size: 799 KB
- Stars: 35
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Next.js + SVGR
[](https://www.npmjs.com/package/next-plugin-svgr)
[](https://www.npmjs.com/package/next-plugin-svgr)
[](https://github.com/platypusrex/next-merge-props/blob/master/LICENSE)
Flexible [Next.js](https://github.com/zeit/next.js) plugin for transforming svg's into react components using the svgr library
### Installation
npm
```
npm install --save next-plugin-svgr
```
or yarn
```
yarn add next-plugin-svgr
```
### Usage
Create a `next.config.js` in your project
```js
// next.config.js
const withSvgr = require('next-plugin-svgr');
module.exports = withSvgr();
```
Optionally add Next.js configuration as a parameter
```js
// next.config.js
const withSvgr = require('next-plugin-svgr');
module.exports = withSvgr({
webpack(config, options) {
return config;
},
});
```
Or with [`next-compose-plugins`](https://github.com/cyrilwanner/next-compose-plugins) when composing multiple plugins
```js
// next.config.js
const withPlugins = require("next-compose-plugins");
const withSvgr = require("next-plugin-svgr");
module.exports = withPlugins([
withSvgr
// your other plugins here
]);
```
And now in your components you can use the svg as a component
```js
import Icon from './icon.svg';
export default () => (
);
```
### Options
#### svgrOptions
The plugins supports all available options of svgr webpack loader.
Check out the [svgr documentation](https://react-svgr.com/docs/options/) for the full list of options.
Example with options:
```js
module.exports = withSvgr({
svgrOptions: {
titleProp: true,
icon: true,
svgProps: {
height: 'auto',
},
},
});
```
You can optionally specify a project configuration file. SVGR uses
[cosmiconfig](https://github.com/davidtheclark/cosmiconfig) for configuration file support,
which means that any file type accepted by cosmicconfig is supported.
* .svgrrc file, written in YAML or JSON, with optional extensions: .yaml/.yml/.json/.js.
* A svgr.config.js file that exports an object.
* A "svgr" key in your package.json file.
**note:** The plugin will automatically detect your config file so you shouldn't have to include the `configFile`
property in `svgrOptions`. The option to specify exists and can be accomplished following the example below.
```js
// .svgrrc.js
module.exports = {
icon: true,
expandProps: false,
};
// next.config.js
module.exports = withSvgr({
svgrOptions: {
configFile: path.resolve(__dirname, '.svgrrc.js'),
},
});
// or with next-compose-plugins
module.exports = withPlugins([
withGraphql,
[withSvgr, {
svgrOptions: {
configFile: path.resolve(__dirname, '.svgrrc.js'),
},
}],
]);
```
#### fileLoader
If you would like to use the svgr webpack loader with [file-loader](https://github.com/webpack-contrib/file-loader).
Accepts a `boolean` or all available [options](https://github.com/webpack-contrib/file-loader#options) for file-loader.
The `fileLoader` option is `undefined` by default. If defined, it will apply the options below.
**note:** If using `file-loader` and typescript remember to reference the svgr/file-loader types. See [below](#typescript).
Default options:
```
{
limit: 8192,
publicPath: `${assetPrefix ?? ''}/_next/${path}`,
outputPath: `${isServer ? '../' : ''}${path}`,
name: '[path][name].[hash].[ext]',
}
```
```js
module.exports = withSvgr({
fileLoader: true,
svgrOptions: {
...options
},
});
```
```js
module.exports = withSvgr({
fileLoader: {
limit: 16384,
name(resourcePath, resourceQuery) {
if (process.env.NODE_ENV === 'development') {
return '[path][name].[ext]';
}
return '[contenthash].[ext]';
}
},
svgrOptions: {
...options
},
});
```
```js
import url, { ReactComponent as Icon } from './icon.svg';
export default () => (
);
```
### Typescript
Typescript is unable to interpret imported svg files, so `next-plugin-svgr` includes definitions
for svg modules depending on your use case. Per the recommendations of the Next.js maintainers you
should no longer reference these types in the `next-env.d.ts` file. You can instead create a `typings`
directory inside your `src` directory. Then simple create a definitions file (ie: `index.d.ts`) and
reference any of the definitions there. There shouldn't be any need to adjust your `tsconfig.json`
for your project.
1. if using the plugin without the `fileLoader` option
`src/typings/index.d.ts`
```js
///
```
2. If using the plugin with the `fileLoader` option
`src/typings/index.d.ts`
```js
///
```
### Contributors
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## LICENSE
MIT