使用 inkscape 创建图标并使用 material ui SvgIcon 导入

Question

我刚刚在 inkscape 中创建了一个图标。如前所述 here 我将视口设置为 24x24 并将其保存为 svg 文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   sodipodi:docname="drawing.svg"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   id="svg16"
   version="1.1"
   viewBox="0 0 6.3499999 6.3499997"
   height="24"
   width="24">
  <defs
     id="defs10" />

  <sodipodi:namedview
     lock-margins="true"
     fit-margin-bottom="0"
     fit-margin-right="0"
     fit-margin-left="0"
     fit-margin-top="0"
     units="px"
     showborder="true"
     inkscape:snap-nodes="true"
     inkscape:snap-others="true"
     inkscape:object-nodes="false"
     inkscape:snap-object-midpoints="false"
     inkscape:snap-midpoints="false"
     inkscape:guide-bbox="true"
     showguides="true"
     inkscape:window-maximized="0"
     inkscape:window-y="37"
     inkscape:window-x="1920"
     inkscape:window-height="1041"
     inkscape:window-width="1916"
     inkscape:object-paths="false"
     showgrid="false"
     inkscape:document-rotation="0"
     inkscape:current-layer="layer1"
     inkscape:document-units="px"
     inkscape:cy="15.424759"
     inkscape:cx="14.537256"
     inkscape:zoom="22.627417"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     borderopacity="1.0"
     bordercolor="#666666"
     pagecolor="#ffffff"
     id="base" />
  <metadata
     id="metadata13">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
    <g
         transform="translate(74.493643,27.309445)"
         style="opacity:0.954874"
         id="layer1"
         inkscape:groupmode="layer"
         inkscape:label="Layer 1">
        <path
           d="m -74.493643,-24.6269 v 3.667168 h 3.166867 V -24.6269 Z m 1.366019,0.339834 h 0.434813 v 0.257505 h -0.434813 z"
           style="opacity:1;fill:#000000;stroke:none;stroke-width:0.0185523;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
           id="rect1057" />
        <path
           sodipodi:nodetypes="ccccc"
           id="path1065"
           style="opacity:1;fill:#000000;stroke:none;stroke-width:0.0185523;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
           d="m -71.310514,-24.626608 3.166871,-2.639198 v 3.667163 l -3.166871,2.639198 z" />
        <path
           d="m -71.357846,-27.309445 -3.115172,2.657264 h 3.166868 l 3.158511,-2.629412 z m 0.0046,0.125321 2.897601,0.02523 -2.850926,2.381387 h -2.858487 z"
           style="opacity:1;fill:#000000;stroke:none;stroke-width:0.0185523;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
           id="path1067" />
      </g>
    </svg>

现在我想像使用 material ui 图标一样使用此图标。所以我创建了一个名为 logo 的新文件，并将整个 svg 文件粘贴到 <SvgIcon> 之间。这不起作用，因为 sodipodi:nodetypes 例如会引发错误。另外样式应该是一个对象等等。所以我清理了整个条目，只剩下路径。但是没有显示图标。因此，我删除了所有路径，但删除了一条路径以至少看到一些内容，但没有显示任何内容。

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

const Logo = (props) => {
  return (
    <SvgIcon {...props}>
      <path
        d="m 4.493643,-24.00 v 3.667168 h 3.166867 V -24.000 Z m 1.366019,0.339834 h 0.434813 v 0.257505 h -0.434813 z"
        id="rect1057" />
    </SvgIcon>
  )
}
export default Logo;

也许有人可以描述整个过程是如何正确完成的。还有我做错了什么。

Answer 1

我自己能解决：

创建您的图标 inkscape
另存为“优化的 SVG 并根据首选项对话框中的设置选中导出为 SVG 1.1
在选项中检查以下内容：

缩短颜色值
将 CSS 属性转换为 XML 属性
折叠群组
为相似的属性创建组

SVG 输出：

删除 XML 声明
删除元数据
删除评论
带换行和缩进的格式输出

保存文件并使用例如 nvim 打开它
复制 <svg> 标签之间的所有内容
为图标创建一个文件(icon.js)

代码：

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

const MyIcon = ({ color }) => {
  const memorizedIcon = React.useMemo(() => {
    return (
      <SvgIcon viewBox={"0 0 52.916665 52.91667"}>
        // YOUR ICON
      </SvgIcon>
    );
  }, [color]);

  return memorizedIcon;
};

export default MyIcon;

将 viewbox 从 svg 文件复制到代码中
将样式注释从 style="something-tag: something" 转换为 style={{somethingTag: "something"}}

完成

使用 inkscape 创建图标并使用 material ui SvgIcon 导入

Create icon with inkscape and import it with material ui SvgIcon

svg

inkscape

reactjs

material-ui