/Javascript/React/How to use svg in react js

How to use svg in react js

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

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 vote230 views1 answer
React-data-table-component cell action
Javascript React
1 vote221 views1 answer
Connect metamask with react app
Javascript React
0 vote213 views1 answer
Javascript Binding Example With React
Javascript React
0 vote221 views1 answer
Center child components in react
Javascript React
12 votes212 views1 answer
Suspense react
Javascript React
24 votes217 views6 answers
Box shadow react native
Javascript React
23 votes235 views5 answers
USE ICONS IN REACT
Javascript React
26 votes218 views5 answers
React image
Javascript React
11 votes230 views3 answers
Create react tailwind app
Javascript React
0 vote235 views1 answer
React bootstrap hide toggle menu when scrolling down
Javascript React