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

Question

我正在为我的 React 应用程序使用 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 />