Import svg react

import React from 'react';
import LogoName from '../assets/logo.svg'

const Header = () => {
    return ( 
        <div>
           	<img src={LogoName} alt="logo"/>
        </div>
     );
}

Importing svg into react

import React from 'react';
import { ReactComponent as BrandIcon } from "./assets/brand-icon.svg";

export default function(){
  return( 
      <div>
          <BrandIcon />
      </div>
   );
}

How to import svg in react

//customIcon.js

import React from "react";
import {ReactComponent as ImportedSVG} from "path/to/myIcon.svg";
import { SvgIcon } from '@material-ui/core';

function CustomIcon() {
 return(
  <SvgIcon component={ImportedSVG} viewBox="0 0 384 512"/>

)
}

export default CustomIcon;

Source: stackoverflow.com

Add svg in react

<span>
                  <object style={{ float: 'left', height: '15px', position: 'relative', top: '4px' }} data={`${ROOT_URL}/assets/images/svg-icons/history-icon.svg`} type='image/svg+xml'></object>
                </span>

Svg as a component react

import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <ReactLogo />
    </div>
  );
}
export default App;

Source: blog.logrocket.com

Import svg as react component

import React from 'react';
import { ReactComponent as YourSvg } from './YourSvg.svg';

const MyComponent = () => {
    return(
        <YourSvg/>
    );
}

export default MyComponent ;

Source: stackoverflow.com

Similar codes

0 vote347 views1 answer
Npm react native turn by turn navigation
Javascript React
2 votes331 views1 answer
React select with react hook form cotroller
Javascript React
0 vote367 views5 answers
How to use paystack with react
Javascript React
0 vote345 views1 answer
How to creacte react component
Javascript React
0 vote364 views1 answer
How to trigger on Blur only when clicked outside parent component and not child component in react js
Javascript React
11 votes354 views4 answers
Prototype react
Javascript React
0 vote341 views1 answer
About react frame
Javascript React
0 vote344 views1 answer
How to disable RectButton from react-native-gesture-handler
Javascript React
0 vote376 views1 answer
Stop playing music when page is closed react
Javascript React
0 vote346 views1 answer
Get image from gallery react native
Javascript React