reactjssvggraphical-logo

React svg image


I know nothing about React, but I was entrust to do a little task, simple at glance, but Im not been able to complete. I been manipulating a code that I think create an svg a icon in a webpage, this is the code:


            var EuiIconLogoKibana = function EuiIconLogoKibana(props) {
                return _react.default.createElement("svg", _extends({
                    width: 32,
                    height: 32,
                    viewBox: "0 0 32 32",
                    xmlns: "http://www.w3.org/2000/svg"
                }, props), _react.default.createElement("g", {
                    fill: "none",
                    fillRule: "evenodd"
                }, _react.default.createElement("path", {
                    fill: "#F04E98",
                    d: "M4 0v28.789L28.935.017z"
                }), _react.default.createElement("path", {
                    fill: "#00BFB3",
                    d: "M18.479 16.664L6.268 30.754l-1.073 1.237h23.191c-1.252-6.292-4.883-11.719-9.908-15.327"
                })))
            };

I have to change that Icon, so I have a png image, I converted that png to svg with https://convertio.co/, I opened with vs code and get this XML:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="758.000000pt" height="758.000000pt" viewBox="0 0 758.000000 758.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,758.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M3570 6184 c-265 ...TOO MANY NUMBERS"/>
<path d="M3595 3162 c-106 ...TOO MANY NUMBERS"/>
</g>
</svg>

So I thougt that copying the path of the SVG into the the path of the "_react.default.createElement" will draw the image that I want but, I cant get it to work...any ideas of what can I do to solve this?


Solution

  • "M" on a SVG Path means "move to", so I was in the right track, but the image I was trying to draw was to big to fit the space, I started drawing in the 3570 pixel, but the size was determined by:

    _react.default.createElement("svg", _extends({
                        width: 32,
                        height: 32,
                        viewBox: "0 0 32 32",
    

    I just have to resize the drawing and It works.

    Maybe this will be useful for somebody, learnin or working, I dont care, I share. don't be like "BBQ" Becky, "Permit" Patty, "Cornerstore" Caroline or Mike "Over-React"