Reactjs 如何将自定义“PNG”图像添加到材质ui图标

我用的是材料-ui@next用于我的react应用程序。我想在png格式的动态图像中使用图标组件。我在谷歌上搜索了这个，但找不到任何直接有用的东西。

您可以将PNG图像另存为BMP格式，然后使用应用程序将其转换为SVG

现在您可以使用SvgIcon组件。使用记事本打开svg文件，复制svg标记中的标记，并将其放入SvgIcon：

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

您的图标组件已就绪：

<Icon1 /> 

我最终用它来完成这项任务。以下是我使用的步骤：

在Gimp中创建图像并选择图标内容。 选择图标后，转到选择->到路径。这将创建所选内容的向量路径。 接下来，您需要确保将其正确缩放为24x24像素。路径有自己的工具箱窗口。它通常位于图层和通道窗口的旁边

双击在步骤2中创建的路径，并确保选中该路径。 选择该选项。同时将变换选择更改为“缩放”。它是“缩放工具选项”下变换后列出的第三个图标。 选择并配置缩放工具后，单击路径或按ctrl+s打开缩放窗口。 输入24x24像素，然后按Enter键缩放。 在“路径”工具箱中的新缩放路径上单击鼠标右键，然后选择“导出路径”。 打开导出的文件，并将路径标记复制到svg标记内部。此外，删除路径标记中除d属性之外的任何其他属性。不需要填充和笔划属性。 创建一个新文件并通过新路径标记，如下所示{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'
);

然后用作：

<NewIcon/>

你可以：

使用：将图像转换为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>
  );
}

---

你需要SVG，我想。我看到的SVG示例，正在考虑是否有一种直接使用PNG的方法。我不这么认为。为什么要将图标组件与PNG一起使用？我想你可以用img标签。

<NewIcon/>

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