Changing a Multicolor SVG icon of type .svg into react component using MaterialUI SvgIcon Component

Just Follow This Simple Procedure

Import the SvgIcon from materialUi and react from react. Then reach to your Svg’s code (open your svg in any code editor). Now, look for viewBox property in it, copy its value and pass viewBox props to SvgIcon (component from materialUi) with the recently copied value. Now you have to copy the svg’s code from <g> tag to its closing tag and place it inside <SvgIcon><SvgIcon/> of your ReactJS file. Give every path style props and add all related css properties (In react inline styling format) given in your svg file’s code.

Voila, you have your react component.

  • If it is a single color svg icon then it should incorporate only one <path> inside your svg’s code. Assign it the CSS properties (In react inline styling format).
  1. Copy the highlighted attributes from your .svg file.

2. Develop the component in .js file using the copied attributes.

3. Replace class with style props.

Your component is now ready to be used.