npmpackage.info

@svgr/webpack

Transform SVGs into React components 🦁

8.1.0

10,657

MIT

TypeScript

753.81 kB

1,296,467,799 4.6

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)

Score

80.6

Supply Chain

81.1

Quality

75.1

Maintenance

100

Vulnerability

98.9

License

Pull Requests

Open

14

Total

338

Closed

57

Merged

267

Issues

Open

107

Total

608

Closed

501

Releases

v8.1.0

Published on 15 Aug 2023

v8.0.1

Published on 09 May 2023

v8.0.0

Published on 09 May 2023

v7.0.0

Published on 24 Mar 2023

v6.5.1

Published on 27 Oct 2022

v6.5.0

Published on 14 Oct 2022

View all 69 releases

Contributors

130

View all 130 contributors

Languages

TypeScript

MDX

JavaScript

TypeScript (64.93%)

MDX (20.67%)

JavaScript (14.4%)

Developer

gregberge

Download Statistics

Total Downloads

1,296,467,799

Last Day

1,091,301

Last Week

4,959,913

Last Month

22,825,647

Last Year

296,814,292

GitHub Statistics

10,657 Stars

650 Commits

425 Forks

35 Watching

3 Branches

130 Contributors

Bundle Size

3.22 MB

Minified

753.81 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

https://github.com/sponsors/gregberge

Maintainers

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

Publised On

15 Aug 2023

Total Downloads

Cumulative downloads

Total Downloads

1,296,467,799

Last day

-7.9%

1,091,301

Compared to previous day

Last week

-19.1%

4,959,913

Compared to previous week

Last month

5.7%

22,825,647

Compared to previous month

Last year

0.3%

296,814,292

Compared to previous year

Daily Downloads

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

Versions

@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

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

6

Code-Review

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

2

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

66 existing vulnerabilities detected

Details

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-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
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-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-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-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-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-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-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.6

/10

Last Scanned on 2025-01-27

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

@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

@juanaraneta/svgr-webpack

6.2.2

SVGR webpack loader.

@newhighsco/storybook-addon-svgr

2.0.40

Storybook addon for transforming SVGs into React components using SVGR

@svgr/webpack

Installations

Developer Guide

Yes

CommonJS, ESM

>=14

18.17.0

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

Score

Pull Requests

14

338

57

267

Issues

107

608

501

Releases

Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

3.22 MB

753.81 kB

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

1,296,467,799

Daily Downloads

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

2

0

0

0

0

0

0

4.6

/10

Other packages similar to @svgr/webpack

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