我正在使用material-ui@next开发我的react应用程序。我想在png
格式中使用动态图像的Icon
组件。我已经搜索了这个问题,但没有找到直接有用的信息。
我正在使用material-ui@next开发我的react应用程序。我想在png
格式中使用动态图像的Icon
组件。我已经搜索了这个问题,但没有找到直接有用的信息。
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>
);
}
您可以将PNG图像另存为BMP格式,然后使用potrace应用程序将其转换为SVG。
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>
);
}
<Icon1 />
我最终使用Gimp来完成这个任务。以下是我所采用的步骤:
接下来,您需要确保它按比例缩放到24x24像素。路径有自己的工具箱窗口。它通常位于图层和通道窗口旁边。
创建一个新文件,在下面指示的位置粘贴新的路径标签
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
中使用Icon
组件? 我认为您可以使用img
标签。 - t13n