如何将自定义的 `PNG` 图像添加到 Material UI 图标

Question

我正在使用material-ui@next开发我的react应用程序。我想在png格式中使用动态图像的Icon组件。我已经搜索了这个问题，但没有找到直接有用的信息。

- Nayan Srivastava

---

你需要 SVG，我想。 - Colin Ricardo

我看到了一个SVG示例，想知道是否有一种直接使用PNG的方法。 - Nayan Srivastava

我不这么认为。 - Colin Ricardo

为什么要在png中使用Icon组件？ 我认为您可以使用img标签。 - t13n

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

- Ashar Dweedar

Answer 2

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

potrace icon1.bmp -s -o icon1.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 /> 

- karim fereidooni

Answer 3

我最终使用Gimp来完成这个任务。以下是我所采用的步骤：

1. 在Gimp中创建图像并选择图标内容。
2. 选择图标后，转到“选择”->“转换为路径”。这将创建您所选内容的矢量路径。

接下来，您需要确保它按比例缩放到24x24像素。路径有自己的工具箱窗口。它通常位于图层和通道窗口旁边。

3. 双击步骤2中创建的路径，并确保已选择它。
4. 选择缩放工具。同时将变换选择更改为缩放。在缩放工具选项下，它是变换之后列出的第三个图标。
5. 选择并配置好缩放工具后，单击路径或按ctrl+s打开缩放窗口。
6. 输入像素24x24并按Enter进行缩放。
7. 右键单击路径工具箱中的新缩放路径，然后选择导出路径。
8. 打开导出的文件，并复制svg标签内的路径标签。此外，删除路径标签中除d属性以外的任何其他属性。不需要填充和描边属性。

9. 创建一个新文件，在下面指示的位置粘贴新的路径标签

   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/>

- Chris