# next-inline-svg

> Next js plugin for SVGR

Latest version **1.0.3** (published 2022-10-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-inline-svg
pnpm add next-inline-svg
yarn add next-inline-svg
bun add next-inline-svg
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-10-07 |
| First published | 2022-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | João Vitor Machado |
| Maintainers | jaovitubr |
| Keywords | svg, svgr, svgo, nextjs, plugin |

## Links

- npm: https://www.npmjs.com/package/next-inline-svg
- Repository: https://github.com/jaovitubr/next-svgr
- Homepage: https://github.com/jaovitubr/next-svgr#readme
- Issues: https://github.com/jaovitubr/next-svgr/issues
- npm.io page: https://npm.io/package/next-inline-svg

## Recent versions

- 1.0.3 (latest) — 2022-10-07
- 1.0.2 — 2022-10-07
- 1.0.1 — 2022-10-07
- 1.0.0 — 2022-10-07

## README

# :rocket: next-inline-svg

[![License](https://img.shields.io/npm/l/next-inline-svg.svg)](https://github.com/jaovitubr/next-inline-svg/blob/main/LICENSE)
[![npm package](https://img.shields.io/npm/v/next-inline-svg/latest.svg)](https://www.npmjs.com/package/next-inline-svg)

[`SVGR`](https://react-svgr.com/docs/next/) takes a raw SVG and transforms it into a ready-to-use `React component`.

## Installation

```bash
npm i next-inline-svg -D
# or with yarn
yarn add next-inline-svg -D
```

Then, import the library in your `next.config.js` file.

```js
const withSvgr = require("next-inline-svg")();

// Example with options:
const withSvgr = require("next-inline-svg")({
  titleProp: true,
  icon: true,
  svgProps: {
    height: "auto",
  },
});
```

## Options

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.

## Usage

You can now start importing your SVG files as if they were components:

```js
import MyIcon from "./myicon.svg";

export default () => (
  <div>
    <MyIcon />
  </div>
);
```


## Sample `next.config.js`

```js
/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

const withInlineSvg = require("next-inline-svg")();

module.exports = (_phase, { defaultConfig }) => {
  const plugins = [withInlineSvg]
  return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...nextConfig })
}
```

---
_Source: https://npm.io/package/next-inline-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._