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

1 vote289 views3 answers
Antd react
Javascript React
0 vote348 views2 answers
Disable a button react
Javascript React
1 vote384 views1 answer
Private route in react js
Javascript React
0 vote349 views1 answer
Flipper semantic issue react native
Javascript React
0 vote334 views1 answer
React hook form reset only one field
Javascript React
-1 vote358 views1 answer
Image component doesn't show image from url react native
Javascript React
68 votes355 views3 answers
React add inline styles in react
Javascript React
13 votes354 views4 answers
React deep copy
Javascript React
0 vote362 views1 answer
Custom react native product rating
Javascript React
1 vote381 views1 answer
Rendering, reconciliation and committing in react
Javascript React