如何将自定义`PNG`图像添加到材料ui图标

Question

我正在使用material-ui @ next作为我的反应应用程序。我想在Icon格式中使用png组件和动态图像。我搜索了这个，但找不到任何直接有用的东西。

Answer 1

你可以将PNG图像保存为BMP格式，然后使用qazxsw poi app将它们转换为SVG。

potrace

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

potrace icon1.bmp -s -o icon1.svg

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

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

Answer 2

我最终使用<Icon1 /> 来实现这一目标。以下是我使用的步骤：

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

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

3. 双击在步骤2中创建的路径，并确保选中它。
4. 选择Gimp。同时将变换选择更改为缩放。它是在缩放工具选项下转换后列出的第三个图标。
5. 选择并配置缩放工具后，单击路径或按ctrl + s打开缩放窗口。
6. 输入像素24x24并按Enter键进行缩放。
7. 右键单击路径工具箱中的新缩放路径，然后选择导出路径。
8. 打开导出的文件，然后复制svg标记内的路径标记。此外，删除路径标记中除d属性之外的任何其他属性。不需要填充和描边属性。
9. 创建一个新文件并通过{paste path tag here}在下面指出的新路径标记之后 Scale Tool
10. 使用您的图标如下：

导入为：

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

然后用作：

import NewIcon from './filename.tsx';