Update for svg-react-loader@v0.4.0

[jhamlet]

Hi there,

Just came across your npm module, and your repository.

I want to let you know that I am getting ready to launch a v0.4.0 version of svg-react-loader that is a complete refactor. It no longer needs babel and opens up an API that allows you to fully customize the final SVG component output to React.

You can review the update here: https://github.com/jhamlet/svg-react-loader/blob/version-0.4.0/README-v0.4.0.md and you can install it with npm install svg-react-loader@next

I would appreciate any feedback you have since you did catch one particular webpack configuration step I neglected in my own documentation.

Thanks,

;-j

[hellatan]

hey @jhamlet! I just came across this issue. I'll take a look and let you know if anything comes up. It looks like 0.4.0 hasn't been published yet?

[jhamlet]

@hellatan officially no. You can get it by doing a npm install svg-react-loader@next or npm install svg-react-loader@0.4.0-beta.2 if you want to be precise.

[hellatan]

@jhamlet is there anything in particular i should look out for? I'm not sure which webpack issue you're talking about but I'll talk to my co-worker @nameofname as well, as he's the one that set things up originally.

I just installed svg-react-loader@0.4.0-beta.2 and this is the result of a file that did not use babel to transform its contents:

const React = require('react');
const Component = React.createClass({
    render: function() {
        return (
            <svg className={ [this.props.className, 'dibsvg-svg dibsvg-account-filled'].join(' ')} viewBox="0 0 500 500">
  <path d="M278.088764,500 C190.723711,500 100.959616,499.78903 11.3954418,499.367089 L0,499.367089 L0.799680128,487.552743 C1.19952019,480.801688 4.9980008,421.940928 14.3942423,399.78903 C15.9936026,395.780591 26.1895242,370.886076 51.9792083,361.181435 L130.747701,327.637131 L163.934426,312.236287 C164.534186,312.025316 179.128349,305.696203 183.126749,287.341772 C183.526589,284.599156 183.326669,280.801688 182.926829,279.746835 C181.127549,276.160338 181.127549,276.160338 176.729308,270.886076 L176.529388,270.675105 C175.129948,268.987342 143.942423,229.957806 136.745302,173.628692 C136.345462,170.886076 132.546981,144.092827 136.145542,112.447257 C141.143543,67.5105485 158.336665,34.3881857 186.12555,16.6666667 C187.32507,15.8227848 213.714514,0 251.09956,0 C272.890844,0 294.082367,5.48523207 314.07437,16.0337553 C321.271491,19.4092827 381.847261,51.0548523 365.253898,175.316456 C364.854058,179.324895 358.656537,228.691983 325.669732,270.675105 C324.870052,271.518987 324.070372,272.57384 323.070772,273.839662 C321.471411,275.738397 319.272291,278.059072 318.072771,280.168776 C317.872851,281.223629 317.473011,283.966245 318.472611,287.130802 L318.672531,287.763713 L318.872451,288.607595 C319.072371,289.029536 322.271092,304.219409 341.463415,313.080169 L384.446222,333.544304 L447.820872,360.337553 C449.220312,360.970464 487.005198,376.793249 495.001999,429.324895 L495.201919,430.379747 L500,499.578059 L488.604558,499.578059 C487.604958,499.367089 407.836865,500 278.088764,500 L278.088764,500 Z"/>
</svg>
        );
    }
});
Component.propTypes = {
    className : React.PropTypes.string
};
module.exports = Component;

vs with babel:

'use strict';

var React = require('react');
var Component = React.createClass({
    displayName: 'Component',

    render: function render() {
        return React.createElement(
            'svg',
            { className: [this.props.className, 'dibsvg-svg dibsvg-account-filled'].join(' '), viewBox: '0 0 500 500' },
            React.createElement('path', { d: 'M278.088764,500 C190.723711,500 100.959616,499.78903 11.3954418,499.367089 L0,499.367089 L0.799680128,487.552743 C1.19952019,480.801688 4.9980008,421.940928 14.3942423,399.78903 C15.9936026,395.780591 26.1895242,370.886076 51.9792083,361.181435 L130.747701,327.637131 L163.934426,312.236287 C164.534186,312.025316 179.128349,305.696203 183.126749,287.341772 C183.526589,284.599156 183.326669,280.801688 182.926829,279.746835 C181.127549,276.160338 181.127549,276.160338 176.729308,270.886076 L176.529388,270.675105 C175.129948,268.987342 143.942423,229.957806 136.745302,173.628692 C136.345462,170.886076 132.546981,144.092827 136.145542,112.447257 C141.143543,67.5105485 158.336665,34.3881857 186.12555,16.6666667 C187.32507,15.8227848 213.714514,0 251.09956,0 C272.890844,0 294.082367,5.48523207 314.07437,16.0337553 C321.271491,19.4092827 381.847261,51.0548523 365.253898,175.316456 C364.854058,179.324895 358.656537,228.691983 325.669732,270.675105 C324.870052,271.518987 324.070372,272.57384 323.070772,273.839662 C321.471411,275.738397 319.272291,278.059072 318.072771,280.168776 C317.872851,281.223629 317.473011,283.966245 318.472611,287.130802 L318.672531,287.763713 L318.872451,288.607595 C319.072371,289.029536 322.271092,304.219409 341.463415,313.080169 L384.446222,333.544304 L447.820872,360.337553 C449.220312,360.970464 487.005198,376.793249 495.001999,429.324895 L495.201919,430.379747 L500,499.578059 L488.604558,499.578059 C487.604958,499.367089 407.836865,500 278.088764,500 L278.088764,500 Z' })
        );
    }
});
Component.propTypes = {
    className: React.PropTypes.string
};
module.exports = Component;

my guess is that you're expecting the svg element itself to be preserved instead of it being transformed and wrapped in a React.createElement?