CODEWITHSUNDEEP
reactjssvgiconsmaterial-ui
jobiin
jobiin

Reputation: 479

How to get Material UI Icon SVG path? React Icon Picker

I have a react application using Material UI's Icons. The main objective is to have an Icon Picker, where a user can select a MUI Icon and that selected icon's SVG path is saved within the state.

This svg path will then be saved out to an API where it can be displayed in various places. etc.

I've searched through documentation on MUI's site regarding icons, but it's all about implementation, which I can do just fine. I've looked for an npm package, without much luck.

I did come across this package (https://github.com/DMDc0de/material-ui-icon-picker), which is essentially what I'd like the picker to be - but it outputs the icon's name for an icon component <i />. Not what I want. I need the source of the SVG path.

Any direction towards this would be super helpful.

Upvotes: 11

Views: 23692

Answers (2)

Alexis Delrieu
Alexis Delrieu

Reputation: 1513

One way of doing that programmatically is to load the component and to render it in a string. Then to extract the path from the string.

To do so, we can use the renderToString or renderToMarkupString method of ReactDomServer.

Than we can extract the path from the generated string. We can either parse the svg XML with the DOMParser or with a regexp.

Here's an example in TypeScript:

import EditIcon from '@material-ui/icons/Edit';
import ReactDOMServer from 'react-dom/server';

export function getEditIconPath(): string {
  const iconString = ReactDOMServer.renderToString(<EditIcon />);
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(iconString, 'image/svg+xml');
  const iconPath = svgDoc.querySelector('path')?.getAttribute('d') as string;

  return iconPath;
}

Another way to achieve that would be to use the React Test Renderer, thus we can get directly a json including the different properties (including the path). However, it looks like this method is around 10 times slower than the previous method.

Here's an example with the second method:

import EditIcon from '@material-ui/icons/Edit';
import TestRenderer from 'react-test-renderer'; // ES6

export function getEditIconPath(): string {
  const iconComponent = TestRenderer.create(<EditIcon />);
  const iconJson = iconComponent.toJSON();
  const path = iconJson.children[0].props.d;

  return path;
}

Upvotes: 2

Paul LeBeau
Paul LeBeau

Reputation: 101800

  1. Go to the icon site: https://material.io/tools/icons/
  2. Click on an icon
  3. Click on "Selected icon" button (bottom left)
  4. Click on the "SVG" button to download the SVG version

Alternatively, go to the GitHub repo and download the SVGs there.

Upvotes: 13

Related Questions