svg in react

1import React from 'react';
2import LogoName from '../assets/logo.svg'
3
4const Header = () => {
5    return ( 
6        <div>
7           	<img src={LogoName} alt="logo"/>
8        </div>
9     );
10}

1//customIcon.js
2
3import React from "react";
4import {ReactComponent as ImportedSVG} from "path/to/myIcon.svg";
5import { SvgIcon } from '@material-ui/core';
6
7function CustomIcon() {
8 return(
9  <SvgIcon component={ImportedSVG} viewBox="0 0 384 512"/>
10
11)
12}
13
14export default CustomIcon;
15

1import React from 'react';
2import {ReactComponent as ReactLogo} from './logo.svg';
3
4const App = () => {
5  return (
6    <div className="App">
7      <ReactLogo />
8    </div>
9  );
10}
11export default App;

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

1accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
2amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
3baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
4clip clipPath clipPathUnits clipRule colorInterpolation
5colorInterpolationFilters colorProfile colorRendering contentScriptType
6contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
7display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
8end exponent externalResourcesRequired fill fillOpacity fillRule filter
9filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
10fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
11g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
12gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
13imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
14kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
15limitingConeAngle local markerEnd markerHeight markerMid markerStart
16markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
17numOctaves offset opacity operator order orient orientation origin overflow
18overlinePosition overlineThickness paintOrder panose1 pathLength
19patternContentUnits patternTransform patternUnits pointerEvents points
20pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
21r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
22requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
23spacing specularConstant specularExponent speed spreadMethod startOffset
24stdDeviation stemh stemv stitchTiles stopColor stopOpacity
25strikethroughPosition strikethroughThickness string stroke strokeDasharray
26strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
27strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
28textDecoration textLength textRendering to transform u1 u2 underlinePosition
29underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
30vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
31vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
32writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
33xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
34xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan