index.js:25 Uncaught TypeError: Cannot read property 'reactIconBase' of undefined

[react-icons]

index.js:25 Uncaught TypeError: Cannot read property 'reactIconBase' of undefined

[gorangajic]

Use of context is broken in react-svg-morph see issue -> gorangajic/react-svg-morph#2 and because react-icons now uses context they do not work anymore. Sorry for that but you can always use svg directly

[szjanos]

Thank you for you fast response!

I've very new to SVG and I've spent hours to resize the google's clouduploud icon to 100px. Finally I ended up with this:

export default class CloudUpload extends Component {
    render() {
        return (
            <svg width="100" height="100" viewBox="0 7 40 25">
               <g> <path d="m23.4 21.6h5l-8.4-8.2-8.4 8.2h5v6.8h6.8v-6.8z m8.9-4.9c4.3 0.3 7.7 3.9 7.7 8.3 0 4.6-3.7 8.4-8.4 8.4h-21.6c-5.5 0-10-4.5-10-10 0-5.2 3.9-9.4 8.9-10 2.1-3.9 6.3-6.8 11.1-6.8 6.1 0 11.1 4.3 12.3 10.1z" />
            </g></svg>
        )
    }
}

(If you have any better solution please tell me)

And now when I am attaching it to the MorphReplace it drops all the attributes svg what I set... :(

I have also tried it with the MorphReplaceResize but it will ignore the viewBox="0 7 40 25" property so the cloud image is not at the middle of the viewport.

<MorphReplaceResize width={100} height={100} viewBox={"0 7 40 25"}>
        {this.increment % 2 === 1 ? <Hashtag  /> : <CloudUpload />}
</MorphReplaceResize>

Could you please help me out a little bit, cause I am kind a stucked...

I also wanted to ask if there is a better way to get the icons from the react-icons or do I have to always copy the path and create a new React class?

[gorangajic]

Until context bug is fixed react-icons will not work with react-svg-morph for now, you can manually copy the path or use older version.

You should not provide viewBox to MorphReplaceResize it should work without that.

Not sure what you want to do but I have created something similar http://www.webpackbin.com/VyThQMOo-

[szjanos]

The problem is that the Hashtag has a different size than CloudUpload, that's why I cannot use the same viewport.

My Hashtag class looks like this:

export default class Hashtag extends Component {
    render() {
        return (
            <svg width="100" height="100" viewBox="0 0 100 100">
                <path d="m 72.4,3.5 c -2,0 -3.9,0 -5.9,0 -4.5,0 -7,3.4 -7.5,7.5 -0.9,7.3 -1.8,14.6 -2.7,21.9 2.5,-2.5 5,-5 7.5,-7.5 -7.8,-0.2 -15.6,-0.3 -23.3,-0.5 2.5,2.5 5,5 7.5,7.5 0.9,-7.1 1.8,-14.3 2.7,-21.4 0.5,-4.1 -3.8,-7.5 -7.5,-7.5 -2,0 -3.9,0 -5.8,0 -4.5,0 -7,3.4 -7.5,7.5 -0.9,7.1 -1.8,14.2 -2.7,21.3 2.5,-2.5 5,-5 7.5,-7.5 -7.1,-0.2 -14.3,-0.3 -21.4,-0.5 -3,-0.1 -6.8,2.3 -7.2,5.5 -0.3,1.9 -0.6,3.9 -0.8,5.8 -0.7,4.8 1.9,9.4 7.2,9.5 7.2,0.2 14.4,0.3 21.5,0.5 -2.5,-2.5 -5,-5 -7.5,-7.5 -1,7.7 -1.9,15.4 -2.9,23.2 2.5,-2.5 5,-5 7.5,-7.5 -7.3,-0.2 -14.7,-0.3 -22,-0.5 -3,-0.1 -6.8,2.3 -7.2,5.5 -0.3,1.9 -0.6,3.9 -0.8,5.8 -0.7,4.8 1.9,9.4 7.2,9.5 7.4,0.2 14.8,0.3 22.2,0.5 -2.5,-2.5 -5,-5 -7.5,-7.5 -0.9,7.3 -1.8,14.7 -2.8,22 -0.5,4.1 3.8,7.5 7.5,7.5 1.9,0 3.9,0 5.8,0 4.5,0 7,-3.4 7.5,-7.5 0.9,-7.3 1.8,-14.6 2.7,-21.9 -2.5,2.5 -5,5 -7.5,7.5 7.8,0.2 15.6,0.3 23.3,0.5 -2.5,-2.5 -5,-5 -7.5,-7.5 -0.9,7.1 -1.8,14.3 -2.7,21.4 -0.5,4.1 3.8,7.5 7.5,7.5 2,0 3.9,0 5.8,0 4.5,0 7,-3.4 7.5,-7.5 0.9,-7.1 1.8,-14.2 2.7,-21.3 -2.5,2.5 -5,5 -7.5,7.5 7.1,0.2 14.3,0.3 21.4,0.5 3,0.1 6.8,-2.3 7.2,-5.5 0.3,-1.9 0.6,-3.9 0.8,-5.8 C 95.4,59.7 92.8,55.1 87.5,55 80.3,54.8 73.1,54.7 66,54.5 c 2.5,2.5 5,5 7.5,7.5 1,-7.7 1.9,-15.4 2.9,-23.2 -2.5,2.5 -5,5 -7.5,7.5 7.3,0.2 14.7,0.3 22,0.5 3,0.1 6.8,-2.3 7.2,-5.5 0.3,-1.9 0.6,-3.9 0.8,-5.8 C 99.6,30.7 97,26.1 91.7,26 84.3,25.8 76.9,25.7 69.5,25.5 c 2.5,2.5 5,5 7.5,7.5 0.9,-7.3 1.8,-14.7 2.8,-22 0.6,-4.1 -3.7,-7.5 -7.4,-7.5 -4.5,0 -7,3.4 -7.5,7.5 -0.9,7.3 -1.8,14.7 -2.8,22 -0.5,4.1 3.8,7.4 7.5,7.5 7.4,0.2 14.8,0.3 22.2,0.5 -2.4,-3.2 -4.8,-6.3 -7.2,-9.5 -0.3,1.9 -0.6,3.9 -0.8,5.8 2.4,-1.8 4.8,-3.7 7.2,-5.5 -7.3,-0.2 -14.7,-0.3 -22,-0.5 -4.5,-0.1 -7,3.5 -7.5,7.5 -1,7.7 -1.9,15.4 -2.9,23.2 -0.5,4.1 3.8,7.4 7.5,7.5 7.2,0.2 14.4,0.3 21.5,0.5 -2.4,-3.2 -4.8,-6.3 -7.2,-9.5 -0.3,1.9 -0.6,3.9 -0.8,5.8 2.4,-1.8 4.8,-3.7 7.2,-5.5 -7.1,-0.2 -14.3,-0.3 -21.4,-0.5 -4.5,-0.1 -7,3.5 -7.5,7.5 -0.9,7.1 -1.8,14.2 -2.7,21.3 2.5,-2.5 5,-5 7.5,-7.5 -2,0 -3.9,0 -5.8,0 2.5,2.5 5,5 7.5,7.5 C 65.3,82 66.2,74.8 67.1,67.7 67.6,63.6 63.3,60.3 59.6,60.2 51.8,60 44,59.9 36.3,59.7 c -4.5,-0.1 -7,3.5 -7.5,7.5 -0.9,7.3 -1.8,14.6 -2.7,21.9 2.5,-2.5 5,-5 7.5,-7.5 -1.9,0 -3.9,0 -5.8,0 2.5,2.5 5,5 7.5,7.5 0.9,-7.3 1.8,-14.7 2.8,-22 0.5,-4.1 -3.8,-7.4 -7.5,-7.5 -7.4,-0.2 -14.8,-0.3 -22.2,-0.5 2.4,3.2 4.8,6.3 7.2,9.5 0.3,-1.9 0.6,-3.9 0.8,-5.8 -2.4,1.8 -4.8,3.7 -7.2,5.5 7.3,0.2 14.7,0.3 22,0.5 4.5,0.1 7,-3.5 7.5,-7.5 1,-7.7 1.9,-15.4 2.9,-23.2 0.5,-4.1 -3.8,-7.4 -7.5,-7.5 -7.2,-0.2 -14.4,-0.3 -21.5,-0.5 2.4,3.2 4.8,6.3 7.2,9.5 0.3,-1.9 0.6,-3.9 0.8,-5.8 -2.4,1.8 -4.8,3.7 -7.2,5.5 7.1,0.2 14.3,0.3 21.4,0.5 4.5,0.1 7,-3.5 7.5,-7.5 0.9,-7.1 1.8,-14.2 2.7,-21.3 -2.5,2.5 -5,5 -7.5,7.5 2,0 3.9,0 5.8,0 -2.5,-2.5 -5,-5 -7.5,-7.5 -0.9,7.1 -1.8,14.3 -2.7,21.4 -0.5,4.1 3.8,7.4 7.5,7.5 7.8,0.2 15.6,0.3 23.3,0.5 4.5,0.1 7,-3.5 7.5,-7.5 0.9,-7.3 1.8,-14.6 2.7,-21.9 -2.5,2.5 -5,5 -7.5,7.5 2,0 3.9,0 5.9,0 9.6,0 9.6,-15 -0.1,-15 z" />
            </svg>
        )
    }
}

MorphTransitionResize would do the thing but it ignores the first to property of the svg's viewbox so this way my cloud won't be in the middle.

So from the viewBox={"0 7 40 25"} the 7 number is ignored which would pull my icon to the middle of the viewBox.

EDIT: I think I've found the solution. The viewbox and width/height has to be always in synchrone and I have to let the library resize the stuff for me. This means for me that I can't resize via viewbox or if I resize via viewbox I can't set the position of the path so it won't be in the middle of the SVG.

[gorangajic]

great then I will close this issue