CODEWITHSUNDEEP
javascriptreactjssvg
erol_smsr
erol_smsr

Reputation: 1496

SVG icons in ReactJS

I have to move an SVG icon from a regular website to a ReactJS website. The SVG has to be modified a little to make it compatible with JSX, so I've removed all the ':'s and replaced them with camel case attribute names for JSX compatibility. The only issue is the d attribute.

The SVG now looks like:

<svg id="Logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 900 800" enable-background="new 0 0 1024 1024" xmlSpace="preserve">
    <g id="Layer_1"></g>
    <g id="Logo">
        <g>
            <g id="Fish">
                <g>
                    <path style={{fill:"#8DC046"}} d="M430.249,525.415c0,64.563-58.349,136.165-58.349,136.165l0.434,0.435l214.046-136.867L374.238,388.279
                        l-0.594,0.596C373.644,388.875,430.249,458.241,430.249,525.415z"></path>
                </g>
                <g>
                    <path style={{fill="#B8CD43"}} d="M586.381,525.147L374.238,388.279l-0.594,0.596c0,0,56.605,69.366,56.605,136.54L586.381,525.147z"></path>
                </g>
                <g>
                    <path style={{fill="#15AADB"}} d="M430.249,253.264c0,64.145-56.444,136.163-56.444,136.163l0.433,0.435l212.143-136.868L372.334,116.125
                        l-0.595,0.598C371.739,116.723,430.249,188.18,430.249,253.264z"></path>
                </g>
                <g>
                    <path style={{fill="#4AC5ED"}} d="M586.381,252.994L372.334,116.125l-0.595,0.598c0,0,58.51,71.457,58.51,136.541L586.381,252.994z"></path>
                </g>
                <g>
                    <path style={{fill="#F88F2D"}} d="M596.473,389.394c0,216.894-135.035,388.081-135.035,388.081l0.789,0.795L889.707,388.9L462.227-0.467
                        l-1.095,1.097C461.132,0.629,596.473,177.202,596.473,389.394z"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

This gives me the following error:

Module build failed: SyntaxError: Unexpected token (90:58)

This makes sense, but in the d attributes in my case there are parts like M596.473,389.394c0. As you can imagine, the letter c between the 4 and 0 cause issues as the letter is not an integer.

How can I make this SVG work without using a library or something else? I just want to convert this SVG to valid JSX.

Upvotes: 0

Views: 465

Answers (2)

madhurgarg
madhurgarg

Reputation: 1341

Change style={{fill="#B8CD43"}} to style={{fill: "#B8CD43"}} every place, it will work.

There is no need of dangerouslySetInnerHTML. Here is the working Demo

Upvotes: 2

Amid
Amid

Reputation: 22352

React does not play nice with SVG yet. If your svg is static I personally find it much easier to do it this way:

var img = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 252.5 148.7" xml:space="preserve">
<g>
    <polygon points="252.5,0 252.5,52.6"/>
</g>
</svg>`

In string you can put your svg exactly how you read it from file/DB without any extra conversions.

And then later use it in render like this:

<div dangerouslySetInnerHTML={{__html: img}}/>

Upvotes: 0

Related Questions