CODEWITHSUNDEEP
javascriptreactjssvg
HichiHachi
HichiHachi

Reputation: 491

How to add a simple SVG path to a react app

I'm trying to get a simple SVG graphic in my react app. But nothing is visible.

I created the graphic in Inkscape and got rid of (what I assumed was garbage ) extra code. Any help would be appreciated I'm a noob with SVGs

const test = () => {
    return (
        <svg viewBox="0 0 210 297">
            <path
                className="polymorph"
                d="m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,298.51041 H 0.75741577 Z"
            />
        </svg>
    );
};

I got it working. Apparently my problem was importing in camelCase instead of PascalCase.

import testSVG from '../src/components/test';

function App() {
    return <testSVG />;
}

import TestSVG from '../src/components/test';

function App() {
    return <TestSVG />;
}

Screenshot of Chrome Browser not working Screenshot of working SVG

Upvotes: 0

Views: 13742

Answers (1)

ravibagul91
ravibagul91

Reputation: 20755

Your rendred element is,

<testsvg></testsvg>

it means youu have added your component like this,

<testsvg />

When you add element using lowercase name, React thinks it is simple HTML tag and not a React component.

Probably the issue with your Component name.

const test = () => {

You should use PascalCase name for your component, so your component should look like,

const Test = () => {   //Notice PacsalCase name
    return (
        <svg viewBox="0 0 210 297">
            <path
                className="polymorph"
                d="m 0.22287672,94.082764 c 0,0 17.63282128,-34.831303 110.42670328,-36.348656 63.66595,-1.041057 101.55017,-59.333835 101.55017,-59.333835 L 211.66521,298.51041 H 0.75741577 Z"
            />
        </svg>
    );
};

export default Test

Then you should import your component like this,

import Test from './Test'   //write correct filename

And finally usage,

<Test />

Demo

Upvotes: 3

Related Questions