react-svg-loader

Packages

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

Versions

Current

VERSION: 3.x (master)

Refer CHANGELOG

v2.x

branch=v2

v1.x

branch=v1

v0.1.x

branch=v0.1

Contrubitors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

LICENSE

MIT

Changelog

3.0.1

• Fix package.json version updates (27bce4a)

3.0.0

• 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)

2.1.0

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

2.0.0

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