Create icon with inkscape and import it with material ui SvgIcon

Question

I just created an icon in inkscape. Like mentioned here I set the viewport to 24x24 and I saved it as a svg file:

Now I want to use this Icon like I use a material ui icon. So I created a new file called logo and just pasted the whole svg file between . This didn't work because sodipodi:nodetypes for example throws an error. In addition the style should be an object and so on. So I cleaned the whole entries and only the paths are left. But no Icon is shown. So I deleted all paths but one to see at least something but nothing is shown.

import React from "react";
import SvgIcon from "@material-ui/core/SvgIcon";

const Logo = (props) => {
  return (
    
      
    
  )
}
export default Logo;

Maybe someone can describe the whole process how this is done correctly. And what I'm doing wrong.

SamuelTJackson · Accepted Answer

I could solve it by myself:

Create your icon inkscape
Save as "Optimized SVG and check Export as SVG 1.1 per settings in Preference Dialog
check the following at the options:

Shorten color values
Convert CSS attributes to XML attributes
Collapse groups
Create groups for similar attributes

SVG Output:

Remove the XML declaration
Remove metadata
Remove comments
Format output with line-breaks and indentation

Save the file and open it with for example nvim
Copy everything between the tags
create an file for the icon (icon.js)

code:

import React from "react";
import SvgIcon from "@material-ui/core/SvgIcon";

const MyIcon = ({ color }) => {
  const memorizedIcon = React.useMemo(() => {
    return (
      
        // YOUR ICON
      
    );
  }, [color]);

  return memorizedIcon;
};

export default MyIcon;

Copy the viewbox from the svg file to the code
transform the style annotations from style="something-tag: something" to style={{somethingTag: "something"}}

Done

Create icon with inkscape and import it with material ui SvgIcon

Answers (1)

Related Questions