npmpackage.info

Gathering detailed insights and metrics for @svgr/webpack

Other packages similar to @svgr/webpack

@packasso/jest-svgr-transformer

2.1.7

jest svg transformer compatible with @svgr/webpack loader

next-plugin-svgr

1.1.12

Next js plugin for SVGR

@newhighsco/storybook-addon-svgr

2.0.60

Storybook addon for transforming SVGs into React components using SVGR

@juanaraneta/svgr-webpack

6.2.2

SVGR webpack loader.

Gathering detailed insights and metrics for @svgr/webpack

@svgr/webpack - 8.1.0 | npmpackage.info

@svgr/webpack

Transform SVGs into React components 🦁

8.1.0

10,860

MIT

TypeScript

14.84 kB

4.4

Installations

npm install @svgr/webpack

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Min. Node Version

>=14

Node Version

18.17.0

NPM Version

lerna/6.6.0/node@v18.17.0+arm64 (darwin)

Pull Requests

Open

18

Total

343

Closed

58

Merged

267

Issues

Open

111

Total

617

Closed

506

Releases

v8.1.0

Updated on Aug 15, 2023

v8.0.1

Updated on May 09, 2023

v8.0.0

Updated on May 09, 2023

v7.0.0

Updated on Mar 24, 2023

v6.5.1

Updated on Oct 27, 2022

v6.5.0

Updated on Oct 14, 2022

View All 69 releases

Languages

TypeScript

MDX

JavaScript

TypeScript (64.93%)

MDX (20.67%)

JavaScript (14.4%)

Developer

gregberge

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

10,860 Stars

650 Commits

430 Forks

35 Watchers

3 Branches

129 Contributors

Updated on Jul 10, 2025

Sponsor this package

https://github.com/sponsors/gregberge

Maintainers

View All 129 Contributors

Package Meta Information

Latest Version

8.1.0

Package Id

@svgr/webpack@8.1.0

Unpacked Size

14.84 kB

Size

5.25 kB

File Count

NPM Version

lerna/6.6.0/node@v18.17.0+arm64 (darwin)

Node Version

18.17.0

Published on

Aug 15, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@babel/core @babel/plugin-transform-react-constant-elements @babel/preset-env @babel/preset-react @babel/preset-typescript @svgr/core @svgr/plugin-jsx @svgr/plugin-svgo

Dev Dependencies

babel-loader memory-fs url-loader webpack

@svgr/webpack

Webpack loader for SVGR.

npm install @svgr/webpack --save-dev

Usage

In your webpack.config.js:

1{
2  test: /\.svg$/,
3  use: ['@svgr/webpack'],
4}

In your code:

1import Star from './star.svg'
2
3const App = () => (
4  <div>
5    <Star />
6  </div>
7)

Passing options

1{
2  test: /\.svg$/,
3  use: [
4    {
5      loader: '@svgr/webpack',
6      options: {
7        native: true,
8      },
9    },
10  ],
11}

Using with `url-loader` or `file-loader`

It is possible to use it with url-loader or file-loader.

In your webpack.config.js:

1{
2  test: /\.svg$/,
3  use: ['@svgr/webpack', 'url-loader'],
4}

In your code:

1import starUrl, { ReactComponent as Star } from './star.svg'
2
3const App = () => (
4  <div>
5    <img src={starUrl} alt="star" />
6    <Star />
7  </div>
8)

The named export defaults to ReactComponent, but can be customized with the namedExport option.

Please note that by default, @svgr/webpack will try to export the React Component via default export if there is no other loader handling svg files with default export. When there is already any other loader using default export for svg files, @svgr/webpack will always export the React component via named export.

If you prefer named export in any case, you may set the exportType option to named.

Use your own Babel configuration

By default, @svgr/webpack includes a babel-loader with an optimized configuration. In some case you may want to apply a custom one (if you are using Preact for an example). You can turn off Babel transformation by specifying babel: false in options.

1// Example using preact
2{
3  test: /\.svg$/,
4  use: [
5    {
6      loader: 'babel-loader',
7      options: {
8        presets: ['preact', 'env'],
9      },
10    },
11    {
12      loader: '@svgr/webpack',
13      options: { babel: false },
14    }
15  ],
16}

Handle SVG in CSS, Sass or Less

It is possible to detect the module that requires your SVG using Rule.issuer in Webpack 5. Using it you can specify two different configurations for JavaScript and the rest of your files.

1;[
2  {
3    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
4    issuer: /\.[jt]sx?$/,
5    use: ['babel-loader', '@svgr/webpack', 'url-loader'],
6  },
7  {
8    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
9    loader: 'url-loader',
10  },
11]

Rule.issuer in Webpack 4 has additional conditions which are not available in Webpack 5.

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

81 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-8g77-54rh-46hx
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-fp36-299x-pwmw
Warn: Project is vulnerable to: GHSA-jrvm-mcxc-mf6m
Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc
Warn: Project is vulnerable to: GHSA-h2pm-378c-pcxx
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
Warn: Project is vulnerable to: GHSA-44fp-w29j-9vj5
Warn: Project is vulnerable to: GHSA-4pg4-qvpc-4q3h
Warn: Project is vulnerable to: GHSA-g5hg-p3ph-g8qg
Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693

Score

4.4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @svgr/webpack

Other packages similar to @svgr/webpack

@svgr/webpack

Installations

Developer Guide

Yes

CommonJS, ESM

>=14

18.17.0

lerna/6.6.0/node@v18.17.0+arm64 (darwin)

Pull Requests

18

343

58

267

Issues

111

617

506

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

@svgr/webpack

Usage

Passing options

Using with url-loader or file-loader

Use your own Babel configuration

Handle SVG in CSS, Sass or Less

License

10

10

10

10

6

0

0

0

0

0

0

0

4.4

/10

Using with `url-loader` or `file-loader`