CODEWITHSUNDEEP
reactjsmaterial-ui
Nayan Srivastava
Nayan Srivastava

Reputation: 3725

How to add custom `PNG` image to material ui icon

I am using material-ui@next for my react app. I want to use Icon component with dynamic images in png format. I googled this but cannot find anything directly helpful.

Upvotes: 10

Views: 32137

Answers (3)

Ashar Dweedar
Ashar Dweedar

Reputation: 643

You can:

In your code:

import * as React from "react";
import { SvgIcon } from "@material-ui/core";

export default function Icon1(props) {
  return (
    <SvgIcon
      {...props}
      ... // add here the params that are sent to <svg /> tag in your file 
   /*
    mine were something like:
      version="1.0"
      xmlns="http://www.w3.org/2000/svg"
      width="3000.000000pt"
      height="1068.000000pt"
      viewBox="0 0 3000.000000 1068.000000"
      preserveAspectRatio="xMidYMid meet">
    */
    >
    // The tags inside the <svg />; probably something like <g/> <path/> tags
    </SvgIcon>
  );
}

Upvotes: 4

Chris
Chris

Reputation: 472

I ended up using Gimp to accomplish this. Here are the steps I used:

  1. Create image in Gimp and select the icon content.
  2. After your icon is selected, go to Select->To Path. This creates a vector path of your selection.

Next you need to make sure that it is scaled correctly to 24x24 pixels. The path's have their own toolbox window. It is usually found right next to the layers and channels windows.

  1. Double click on the path created in step 2 and ensure that it is selected.
  2. Select the Scale Tool. Also change the transform selection to scale. It is the third icon listed after transform under the scale tool options.
  3. Once the scale tool is selected and configured, click on the path or hit ctrl+s to open the scale window.
  4. Enter the pixels 24x24 and hit enter to scale.
  5. Right click on the new scaled path in the paths toolbox and select export path.
  6. Open the exported file, and copy the path tag inside of the svg tag. Also, remove any other attributes in the path tag except the d attribute. The fill and stroke attributes are not needed.

  7. Create a new file and past the new path tag where indicated below by {paste path tag here}

    import * as React from 'react';
import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';

export default createSvgIcon(
  <React.Fragment>
    <path fill='none' d='M0 0h24v24H0z' />
    {paste path tag here}
  </React.Fragment>,
  'NewIcon'
);

  8. Use your icon as follows:

Import as: 

import NewIcon from './filename.tsx';

Then use as: 

<NewIcon/>

Upvotes: 0

karim fereidooni
karim fereidooni

Reputation: 307

You can saveas PNG images to BMP format then convet them to SVG with potrace app.

potrace icon1.bmp -s -o icon1.svg

Now you can use SvgIcon component. open svg file with notepad and copy tags that are in svg tag and put it into SvgIcon:

function Icon1(props) {
return (
<SvgIcon {...props} >
// tags in your svg file
// ex: <path d="M81 1032 c-19 -9 "/>
</SvgIcon>
);
}

Your icon component is ready:

<Icon1 />

Upvotes: 3

Related Questions