Question

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

Answer 1

您可以将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 />

Answer 2

您可以：

使用：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 3

我最终使用Gimp来完成此操作。这是我使用的步骤：

在Gimp中创建图像并选择图标内容。
选择图标后，转到“选择”->“到路径”。这将创建您选择的向量路径。

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

双击在步骤2中创建的路径，并确保已选择它。
选择Scale Tool。同时将变换选择更改为缩放比例。这是缩放后在缩放工具选项下列出的第三个图标。
选择并配置缩放工具后，单击路径或按ctrl + s即可打开缩放窗口。
输入像素24x24，然后按Enter键进行缩放。
在路径工具箱中右键单击新的缩放路径，然后选择导出路径。
打开导出的文件，然后在svg标记内复制path标记。另外，请除去path标记中除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'
);

使用您的图标，如下所示：

导入为：

import NewIcon from './filename.tsx';

然后用作：

<NewIcon/>

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

3 个答案: