svgr

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 v16.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

Bug Fixes

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

Bug Fixes

• use literal instead of litteral (7849fd4)

Features

• allow to spread props at the start (#166) (cd659dc)
• upgrade: [email protected] ([email protected]) & others (2d9b7bd)
• new option "svgProps" (#172) (9657110)

Features

• upgrade to Babel v7 (7bc908d)

Bug Fixes

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

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

Bug Fixes

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

Features

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

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.

Features

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

Bug Fixes

• ids: do not minify them (538b73f)

Bug Fixes

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

Features

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

Bug Fixes

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

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

Features

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

Performance Improvements

• refactor emSize to reduce iterations (3c9d8b4)

Features

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

Features

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

Features

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

Features

• simplify webpack usage (7ac643e)