• Fix package.json version updates (27bce4a)

• Drop Node 6. Run tests on Node 8, 10, and 12
• Upgrade dependencies

Fixes:

• Close svgo object instead of mutating it (#250)
• Compatibility between babel 6 and 7 for t.restElement and t.restProperty (#244)
• Update to use fully resolved paths for babel plugins (#209)

Rollup plugin

Two new packages -

• react-svg-core - shared between webpack loader and rollup plugin
• rollup-plugin-react-svg - rollup plugin to load .svg files as react components

Drops Node 0.12 support & webpack 1 support

Tests are run on Node 4, 6, and 8

Output change from component class to arrow function

Previously, the output of the react-svg-loader was -

import React from "react";
export default class SVG extends React.Component {
  render() {
    return <svg {...this.props}>{svgContent}</svg>;
  }
}

and now it is -

import React from "react";
export default props => <svg {...props}>{svgContent}</svg>;

Overridable classnames (to use with css-modules)

Previously, class values are NOT transformed. Now they are transformed such that the output component can be used with css-modules

<svg class="foo bar">

is transformed to

<svg className={ (styles["foo"] || "foo") + " " + (styles["bar"] || "bar") }>

So, you can pass/override some styles in the svg, for example -

import Image from "react-svg-loader!./image.svg";
import styles from "./styles.css"; // with css-modules

const imageStyles = {
  foo: styles.foo,
  bar: styles.bar
}

let component = <Image styles={imageStyles} />

Drop option es5

Previously, you could do,

{
  loader: "react-svg-loader",
  options: {
    es5: true
  }
}

and get output transpiled to ES5 using babel-preset-es2015.

This is now deprecated and the recommended way to use react-svg-loader is to use it with babel-loader

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    "react-svg-loader"
  ]
}

and with babel-preset-env in .babelrc:

{
  "presets": [
    [
      "env",
      {
        "target": {
          "browsers": "IE > 11"
        }
      }
    ]
  ]
}

Move to 3 packages

Now react-svg-loader is split into 3 packages

• babel-plugin-react-svg
• react-svg-loader
• react-svg-loader-cli

Split package into 3 packages

• babel-plugin-react-svg
• react-svg-loader
• react-svg-loader-cli

• Drop Node 5 from travis. Now supports Node 4, 6, 7.
• Fix data-* props from converting to camelCase
• Change deps from ^ to ~
• Yarnify!

• Drop Node 0.12 support and Node 6 support
• Default output is ES2015 instead of JSX - use --jsx to get jsx output
• Drop --es5 CLI and loader flag support in favour of using babel-loader
• Drop -0 support as yargs seems to not support numbers?
• Update deps

• Update packages
• Change handling of props - a162ecfd2104d21709f9253bde63d4bd433ec9e4
• Merge to single visitor - 25a166c8411be42a3e99a44e8c7aa6e7396d7637

• Fix bugs with SVGO options in CLI
• Fix class -> className conversion

The new rewrite. Check README for more.

Rewrite :smiley:

Input SVG

↓

SVG Optimize using SVGO

↓

Babel Transform with `preset=react` and plugin=svgToComponent