如何将自定义`png`映像添加到材料UI图标中

Question

我正在使用材料-UI@我的React应用程序。我想将Icon组件与png格式的动态图像一起使用。我搜索了这个，但找不到任何直接有帮助的东西。

Answer 1

您可以：

• 使用：https：//convertio.co/png-svg/将图像转换为SVG格式
• 下载文件
• 在文本编辑器中打开.svg文件

在您的代码中：

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>
  );
}

Answer 2

您可以将png图像saveas png映射到bmp格式，然后使用potrace app将它们转换为svg。

potrace icon1.bmp -s -o icon1.svg

现在您可以使用svgicon组件。使用记事本和复制标签中的标签打开SVG文件，然后将其放入Svgicon：

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

您的图标组件已经准备就绪：

<Icon1 /> 

Answer 3

我最终使用gimp来实现这一目标。这是我使用的步骤：

1. 在GIMP中创建图像并选择图标内容。
2. 选择您的图标后，转到Select->到路径。这会创建您选择的向量路径。

接下来，您需要确保将其正确缩放到24x24像素。该路径有自己的工具箱窗口。通常在窗户和通道旁边找到它。

3. 双击步骤2中创建的路径并确保选择它。
4. 选择比例工具。还将转换选择更改为比例。这是在比例工具选项下转换后列出的第三个图标。
5. 一旦选择了比例工具并配置了比例工具，请单击路径或点击Ctrl S打开比例窗口。
6. 输入像素24x24并按Enter进行刻度。
7. 右键单击路径工具箱中的新缩放路径，然后选择导出路径。
8. 打开导出的文件，然后在SVG标签的内部复制路径标签。另外，除了d属性外，删除路径标签中的任何其他属性。不需要填充和中风属性。

9. 创建一个新文件并经过新的路径标签，其中{paste path tag在此处指示}

   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'
   );
   

10. 使用以下图标：

导入为：

import NewIcon from './filename.tsx';

然后使用为：

<NewIcon/>