@svgr/rollup

Rollup plugin for SVGR.

npm install @svgr/rollup --save-dev

In your rollup.config.js:

{
  plugins: [svgr()]
}

In your code:

import Star from './star.svg'

const App = () => (
  <div>
    <Star />
  </div>
)

Passing options

{
  plugins: [svgr({ native: true })]
}

Using with url plugin

It is possible to use it with url.

In your rollup.config.js:

{
  plugins: [url(), svgr()]
}

In your code:

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

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

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

Please note that by default, @svgr/rollup will try to export the React Component via default export if there is no other plugin handling svg files with default export. When there is already any other plugin using default export for svg files, @svgr/rollup 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/rollup applies a babel transformation with 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.

{
  plugins: [svgr({ babel: false })]
}

License

MIT

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

8.1.0 (2023-08-15)

Bug Fixes

• cli: fix default dimensions, prettier & svgo (571d5c8)
• config: prefer cli config over rc config (#845) (8b97248)
• react-native: fix duplicate import (#894) (e612b6a)

Features

• esm: add support for svgo.config.cjs (#879) (ae91e2e)

8.0.1 (2023-05-09)

Bug Fixes

• fix peer dependencies (2e05255)

8.0.0 (2023-05-09)

Bug Fixes

• parseObject error causes website broken (05f2946)

Features

• add snake_case filename option (#857) (428b0c7)
• make index template more flexible (#861) (003009c)
• types: change SVGProps from import to import type (#853) (095f021)

BREAKING CHANGES

• index template now receives an array of objects containing both the created component path (path) and the original SVG path (originalPath)

7.0.0 (2023-03-24)

Features

• allow specifying jsxRuntimeImport in config (86bb86f), closes #801 #801
• remove @svgr/plugin-jsx from core (a0f078d)
• upgrade to svgo v3 (#798) (21b6209)

BREAKING CHANGES

• plugin-jsx is no longer included by default in core
• svgr now requires Node.js v14+

6.5.1 (2022-10-27)

Reverts

• Revert "feat(a11y): add attribute role="img" to the svg element (#750)" (1382232), closes #750

6.5.0 (2022-10-14)

Bug Fixes

• fix Yarn peer dependency warning from @babel/core (#786) (db35837), closes #785

Features

• babel-preset: fix 'role' attribute on svg element for react native (#787) (35d85e0)

6.4.0 (2022-10-01)

Bug Fixes

• deps: add babel-preset to core dependencies (#782) (464ec5f)

Features

• a11y: add attribute role="img" to the svg element (#750) (8b9edc4)
• support spaces in file names (#779) (6ee639a)

6.3.1 (2022-07-22)

Bug Fixes

• fix duplicate plugin/preset detected error (#747) (3c6a54c), closes #746
• fix exports compat with ESM (#749) (f3e304c)

6.3.0 (2022-07-18)

Bug Fixes

• core: types field in package.json (#693) (a491ace)
• package.json: fix exports (#745) (2a368d1)

Features

• add descProp option (#729) (a0637d4)
• cli: output file name when error happen to handling a file (#702) (0ec1fbd)

6.2.1 (2022-01-30)

Bug Fixes

• do not transform mask-type (#673) (6e58f2c), closes #643
• use .ts extension for generated index (#670) (d19abe2), closes #462

6.2.0 (2022-01-10)

Bug Fixes

• cli: pass in parser to prettier format to avoid deprecation warning (#662) (74fa3ae)
• plugin-svgo: handle potential errors from optimize (#663) (7582d31)

Features

• support comments in templates (#661) (9afb590)

6.1.2 (2021-12-12)

Bug Fixes

• rollup: missing dep & missing map return (#652) (12627fc)
• specify valid peer deps (45a76ed)

6.1.1 (2021-12-04)

Bug Fixes

• webpack: fix double export (#648) (7595d37), closes #645

6.1.0 (2021-12-01)

Bug Fixes

• fix previous export system (1872829), closes #635

Features

• native: automatically convert inline style in native (138c493), closes #588

Performance Improvements

• remove useless loader-utils package (387bc72), closes #631

5.5.0 (2020-11-15)

Bug Fixes

• typescript: fix react-native support #465 (#488) (d61e0cf)
• ensure a valid name for exports (#489) (0eb8085)
• fix playground (c7ad69f)
• prevent removing the namespace by svgr (#475 (#498) (00e84ea)

Features

• allow custom name for named export (#493) (16a58d6)
• svgo: add .svgorc.js config file support (#451) (8049b1a), closes #412

Performance Improvements

• cli: use fs.promises (#459) (af294ac)
• replace merge-deep with smaller deepmerge (#463) (1f015eb)

5.4.0 (2020-04-27)

Bug Fixes

• wrap svg component directly with memo/forwardRef (#440) (#441) (a6de2da)
• cli: fix index generation (#443) (7c46ad7), closes #433

Features

• add ForeignObject support for react native (#430) (1b56b85)
• cli: make all CLI options available in config (a23a186), closes #431 #437

5.3.1 (2020-04-05)

Bug Fixes

• fix typescript types (ref, title) (#419) (6e7e6b2)

5.3.0 (2020-03-22)

Bug Fixes

• cli: remove confusion between {keep,ignore}-existing (#413) (c5430f9), closes #390
• parcel-plugin: support "parcel" and "parcel-bundler" (853db4e), closes #410
• svgo: support any SVGO config format (#412) (f2b2367), closes #400

Features

• add typescript option (4596d7b), closes #373

5.2.0 (2020-02-23)

Bug Fixes

• verify that svgoConfig.plugins is an array (#397) (88110b6)

Features

• parcel-plugin: replace parcel-bundler with parcel (#387) (d09bcd5)

5.1.0 (2020-01-20)

Bug Fixes

• fix merging svgo plugins in config (#384) (c9d2dfc)

Features

• add Svg prefix to exports that starts with a number (#383) (fd120d1), closes #379
• allow to provide custom index.js template (#378) (f734dda)

5.0.1 (2019-12-29)

Bug Fixes

• fix engines in package.json (a45d6fc)

4.3.3 (2019-09-24)

Bug Fixes

• babel-plugin-svg-dynamic-title: dont render empty title (#341) (88b24c5), closes #333
• invalid characters in component name (#332) (4b4bd2c), closes #331

4.3.2 (2019-07-15)

Performance Improvements

• replace rehype with svg-parser (#321) (7eb5ef6)

4.3.1 (2019-07-01)

Bug Fixes

• titleProp: handle the existing title case by using element instead of value (children) (#315) (065e7a9)

4.3.0 (2019-05-28)

Features

• cli: output relative destination paths (#312) (b78e471)
• titleProps fallbacks to svg's title (#311) (8f92366)

4.2.0 (2019-04-11)

Bug Fixes

• keep viewBox when dimensions are removed (#281) (f476c8e)
• babel-preset: expandProps + icon option (ddfae22), closes #277
• cli: fix kebab case transformation with "_" (39c24c5), closes #280
• hast-util-to-babel-ast: correctly handle aria attributes (23d12aa), closes #279
• plugin-prettier: fix prettier warning (d01d33f)

Features

• add expo option (#289) (978db3e)

4.1.0 (2018-11-24)

Features

• add parcel plugin (#235) (144dbe3), closes #215

4.0.4 (2018-11-24)

Bug Fixes

• webpack: use static babel config (#240) (d67af31), closes #232

4.0.3 (2018-11-13)

Bug Fixes

• babel-plugin: fix usage of spread attribute(#231) (4186953)
• upgrade dependencies (7e2195f)

4.0.2 (2018-11-08)

Bug Fixes

• hast-util-to-babel-ast: replace tabs by spaces in attributes (b0f3d19), closes #219

4.0.1 (2018-11-08)

Bug Fixes

• babel-plugin-transform-svg: support template that only return a single node (80ac40f), closes #223
• babel-plugin-transform-svg-component: parsing error of JSX template exports defs (#225) (1e56309), closes /github.com/gregberge/svgr/blob/master/packages/babel-plugin-transform-svg-component/src/util.js#L61
• hast-util-to-babel-ast: correctly transforms data & aria attributes (99711c4), closes #221
• hast-util-to-babel-ast: replace line-breaks in attributes (00a2625), closes #219

4.0.0 (2018-11-04)

Bug Fixes

• prevent babel read babel.config.js (#206) (514d43d)
• cli: fix --out-dir usage with absolute path (#208) (c922e2e)

Features

• svgo: prefix ids by default (06c338d), closes #210
• v4: new architecture (ac8b8ca)
• allow dynamic properties in replaceAttrValues option (15f55fe), closes #205

BREAKING CHANGES

• v4: - template option must now returns a Babel AST

• @svgr/core does not include svgo & prettier by default

3.1.0 (2018-10-05)

Bug Fixes

• style & custom SVG properties (#203) (f8b2212), closes #199 #201

Features

• allow Mask & Image on React Native (#202) (0256bc0)

3.0.0 (2018-10-01)

Bug Fixes

• rollup: forward filePath in rollup plugin (461492b), closes #177 #188
• webpack: forward filePath in webpack loader (b7a108e), closes #177 #188
• fix --icon + --no-dimensions (7535693), closes #141
• fix expandProps when position is not allowed (45522fc)

Features

• config: improve runtime config (e52cdce), closes #192
• template: expose getProps util for template (5cb238e), closes #187
• add synchronous API (169eb2f), closes #185
• always prefix component name with "Svg" (f71aa7a), closes #190
• do not remove style tag (a4ce09a), closes #191
• new "expandProps" option (bb95828), closes #170
• remove "svgAttributes" option (4e46a5d), closes #173
• use forwardRef on React Native (4bdd989), closes #184
• use React.forwardRef (cbee51c), closes #184

BREAKING CHANGES

• "--no-expand-props" is now replaced by "--expand-props none". You can now specify a position "start" or "end" for "expandProps" property.
• svgAttributes has been removed, please use svgProps instead.
• "ref" option now uses React.forwardRef. You don't have to use "svgRef" prop, just use "ref" and it will work. React.forwardRef requires React

  16.3.

• Style tag will no longer be automatically removed. SVGO should handle it correctly using "inlineStyles" plugin. If you want to remove them, enable "removeStyleElement" plugin in your SVGO config.
• rollup: runtime configuration is now loaded using rollup plugin.
• webpack: runtime configuration is now loaded using webpack loader.

• config: - Runtime configuration is always loaded (even with Node API convert)

• In CLI, "--config" is now "--config-file"; this new option can be used everywhere

2.4.1 (2018-09-16)

Bug Fixes

• config: fix custom config & default options (#176) (9a6c40b)

2.4.0 (2018-09-16)

Bug Fixes

• use literal instead of litteral (7849fd4)

Features

• allow to spread props at the start (#166) (cd659dc)
• upgrade: h2x@1.1.0 (jsdom@12.0.0) & others (2d9b7bd)
• new option "svgProps" (#172) (9657110)

2.3.0 (2018-09-03)

Features

• upgrade to Babel v7 (7bc908d)

2.2.1 (2018-08-16)

Bug Fixes

• rollup: fix to work with rollup-plugin-typescript2 (#147) (4b3737e)

2.2.0 (2018-08-13)

Bug Fixes

• remove null-byte characters (#154) (de7f8a7), closes #153
• webpack: use source when possible (#139) (ae9965d)

Features

• core: pass info to SVGO (2b2353b), closes #152

2.1.1 (2018-07-11)

Bug Fixes

• core: config conflict with icon option (#137) (e13a99a)

2.1.0 (2018-07-08)

Features

• add .editorconfig support (#129) (968fd82)
• cli: support custom filename cases (#136) (4922f7a), closes #118

2.0.0 (2018-06-12)

Features

Project configurations

SVGR now supports Prettier (.prettierc) and SVGO (.svgo.yml) configurations. It also supports a new .svgrrc configuration. See the readme for more detail.

Rollup plugin

Rollup has now an official SVGR plugin available under @svgr/rollup.

Split into several modules

SVGR is now an ecosystem of four modules:

• @svgr/core: Core of SVGR, it exposes the Node API
• @svgr/cli: Command Line Interface
• @svgr/webpack: webpack loader
• @svgr/rollup: a fresh new Rollup plugin

svgAttributes and titleProp options

Two new options appears, the first one svgAttributes gives you the opportunity to add attribute on the root svg tag without creating a custom template:

Command:

svgr --svg-attributes focusable=true foo.svg

Output:

;(props) => <svg focusable="false" />

The second one, titleProp, adds a custom property title to specify the title of the SVG.

Command:

svgr --title-prop foo.svg

Output:

;({ title }) => (
  <svg>
    <title>{title}</title>
  </svg>
)

Breaking changes

Node version

Node v6 support has been dropped, you need Node >= 8 to run SVGR.

Prettier options

All Prettier options have been removed:

• jsx-bracket-same-line
• no-bracket-spacing
• no-semi
• single-quote
• tab-width
• trailing-comma
• use-tabs

If you used it, use a .prettierrc instead of use the new option --prettier-config:

v1.x:

svgr --no-semi file.svg

v2.x:

svgr --prettier-config '{"semi": true}' file.svg

SVGO options

All SVGO options have been removed:

• ids
• keep-useless-defs
• no-title
• no-view-box
• precision

If you used it, use a .svgo.yml instead of use the new option --svgo-config:

v1.x:

svgr --ids file.svg

v2.x:

svgr --svgo-config '{"plugins": [{"cleanupIDs": {"remove": false, "minify": false}}]}' file.svg

Other options

• replace-attr-value has been renamed into replace-attr-values

In API, replaceAttrValues is now an object instead of an array.

Node API changes

• rawConvert method has been dropped
• Templates now receive three arguments: code, config and state
• componentName must now be passed in state

Thanks

Thanks to @MarquesDev and @lifeiscontent.

1.10.0 (2018-05-28)

Features

• upgrade Prettier (v1.13) (2f50403), closes #108

1.9.2 (2018-05-14)

Bug Fixes

• ids: do not minify them (538b73f)

1.9.1 (2018-03-25)

Bug Fixes

• fix width / height override (1f91705), closes #issuecomment-375467614
• handle filename with numbers (a2387ea), closes #62 #64

1.9.0 (2018-03-08)

Features

• add option to removeDimensions (#58) (7357e7c)

1.8.1 (2018-01-31)

Bug Fixes

• loader: add missing babel-plugin (#50) (c49b627)

1.8.0 (2018-01-31)

Bug Fixes

• fix tabWidth option (#49) (a863280), closes #33

Features

• support custom file extension (#47) (56a111f), closes #31
• webpack: include Babel transformation (#48) (dfecd39), closes #45

1.7.0 (2018-01-23)

Features

• emSize: add support for missing width/height (2eacfd8)
• add option keepUselessDefs (3d03510), closes #36

Performance Improvements

• refactor emSize to reduce iterations (3c9d8b4)

1.6.0 (2018-01-08)

Features

• support url-loader & file-loader (b95ed07)

1.5.0 (2017-12-12)

Features

• add ref option (#29) (86e0bda)

1.4.0 (2017-12-07)

Features

• add "-native" option to target React Native (76fd6f5)
• native: import only relevant components (fcd4229)
• native: log unsupported components (888d968)

1.3.0 (2017-12-05)

Features

• add option to keeps IDs from SVG (bfd4066)

1.2.0 (2017-12-04)

Features

• simplify webpack usage (7ac643e)

1.1.0 (2017-11-24)

Features

• add viewBox option that default to true (ba2be3a)

1.0.0 (2017-11-07)

Features

• upgrade svgo & prettier (fd66885)

BREAKING CHANGES

• SVGO now removes viewBox automatically.