# @newhighsco/storybook-addon-svgr

> Storybook addon for transforming SVGs into React components using SVGR

Latest version **4.0.0** (published 2025-11-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install @newhighsco/storybook-addon-svgr
pnpm add @newhighsco/storybook-addon-svgr
yarn add @newhighsco/storybook-addon-svgr
bun add @newhighsco/storybook-addon-svgr
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2025-11-24 |
| First published | 2023-08-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | New High Score |
| Maintainers | benedfit, newhighsco-bot |
| Keywords | storybook-addons, code, svg, svgr, webpack |

## Links

- npm: https://www.npmjs.com/package/@newhighsco/storybook-addon-svgr
- Repository: https://github.com/newhighsco/storybook
- Homepage: https://github.com/newhighsco/storybook/tree/main/packages/storybook-addon-svgr
- Issues: https://github.com/newhighsco/storybook/issues
- npm.io page: https://npm.io/package/@newhighsco/storybook-addon-svgr

## Dependencies (2)

- [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 8.1.0
- [new-url-loader](https://npm.io/package/new-url-loader.md) 0.1.1

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2025-11-24
- 3.0.6 — 2025-10-30
- 3.0.5 — 2025-10-28
- 3.0.4 — 2025-10-19
- 3.0.3 — 2025-10-04
- 3.0.2 — 2025-09-24
- 3.0.1 — 2025-09-19
- 3.0.0 — 2025-09-19
- 2.0.60 — 2025-05-18
- 2.0.59 — 2025-04-03
- 2.0.58 — 2025-03-28
- 2.0.57 — 2025-03-27
- 2.0.56 — 2025-03-25
- 2.0.55 — 2025-03-22
- 2.0.54 — 2025-03-17
- … 77 more at https://npm.io/package/@newhighsco/storybook-addon-svgr/versions

## README

# storybook-addon-svgr [![NPM version](https://img.shields.io/npm/v/@newhighsco/storybook-addon-svgr.svg)](https://www.npmjs.com/package/@newhighsco/storybook-addon-svgr)

[Storybook](https://storybook.js.org/) addon for transforming SVGs into React components using [SVGR](https://react-svgr.com/)

## Installation

Install Storybook and `@newhighsco/storybook-addon-svgr`:

```
yarn add -D storybook @newhighsco/storybook-addon-svgr @storybook/react-webpack5
```

## Usage

Create a `.storybook/main.js` in your project:

```js
// .storybook/main.js
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  framework: '@storybook/react-webpack5',
  addons: [
    {
      name: '@newhighsco/storybook-addon-svgr',
      options: {
        svgrOptions: {
          /* config options here */
        }
      }
    }
  ]
}

export default config
```

In your code:

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

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

## Options

[See options supported by SVGR](https://react-svgr.com/docs/options/). Alternatively create a [SVGR configuration file](https://react-svgr.com/docs/configuration-files/) in your project:

## [CHANGELOG](CHANGELOG.md)

---
_Source: https://npm.io/package/@newhighsco/storybook-addon-svgr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._