React svg

Import svg react

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

const Header = () => {
    return ( 
        <div>
           	<img src={LogoName} alt="logo"/>
        </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>

React svg

//Use this WEB APP to convert any svg to a valide reactJs or React native Component
Playground - SVGR
https://react-svgr.com/playground/

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

Similar codes

0 vote279 views1 answer
How to hide footer in specefic pages in react router
Javascript React
0 vote313 views1 answer
Render blaze in react
Javascript React
4 votes337 views4 answers
Responsive font size react native
Javascript React
15 votes295 views1 answer
Did you mean to use React.forwardRef()?
Javascript React
29 votes292 views2 answers
React or vue
Javascript React
0 vote318 views1 answer
Get api data from localhost in react native
Javascript React
0 vote319 views1 answer
React regions
Javascript React
0 vote310 views1 answer
React native whatsapp integration
Javascript React
0 vote304 views1 answer
2.When will the validation functions be called in the react js
Javascript React
0 vote414 views1 answer
Make a button who disable scrolling down the page react
Javascript React