在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:guilhermehn/react-material-iconic-font开源软件地址:https://github.com/guilhermehn/react-material-iconic-font开源编程语言:JavaScript 100.0%开源软件介绍:react-material-iconic-font
Installnpm i react-material-iconic-font --save Peer Dependencies
Usageimport React from 'react';
import { render } from 'react-dom';
import MaterialIcon from 'react-material-iconic-font';
const AddButton = ({ children, ...props }) => (
<button type="button" {...props}>
<MaterialIcon type="plus" /> {children}
</button>
);
render(<AddButton>Add</AddButton>, document.body); Using icon "stacks"import React from 'react';
import { render } from 'react-dom';
import MaterialIcon, { MaterialIconStack } from 'react-material-iconic-font';
const ShareButton = ({ children, ...props }) => (
<button type="button" {...props}>
<MaterialIconStack>
<MaterialIcon type="square-o" stackSize={2} />
<MaterialIcon type="share" stackSize={1} />
</MaterialIconStack>
{children}
</button>
);
render(<ShareButton>Share</ShareButton>, document.body); Passing HTML attributesconst AddButton = ({ children, ...props }) => (
<button type="button" {...props}>
<MaterialIcon type="plus" data-icon="Add icon" /> {children}
</button>
); Optional Properties// large -> zmdi-hc-lg
<MaterialIcon large />
// large -> zmdi-hc-stack-lg
<MaterialIconStack large></MaterialIconStack>
// size -> zmdi-hc-{x}x
// valid: 2..5
<MaterialIcon size={2} />
// stackSize -> zmdi-hc-stack-{x}x
// valid: 1,2
<MaterialIcon stackSize={2} />
// fixed -> zmdi-hc-fw
<MaterialIcon fixed />
// MaterialIconList -> zmdi-hc-ul + zmdi-hc-li
<MaterialIconList>
<MaterialIcon />
</MaterialIconList>
// inverse -> zmdi-hc-inverse
<MaterialIcon inverse />
// border -> zmdi-hc-border
<MaterialIcon border />
// border="circle" -> zmdi-hc-border-circle
<MaterialIcon border="circle" />
// pull -> pull-{direction}
// valid: ['left', 'right']
<MaterialIcon pull='left' />
// spin -> zmdi-hc-spin
<MaterialIcon spin />
// flip -> zmdi-hc-flip-{axis}
// valid: ['horizontal', 'vertical']
<MaterialIcon flip='horizontal' />
// rotate -> zmdi-hc-rotate-{degress}
// valid: [90, 180, 270]
<MaterialIcon rotate={90} /> LicenseMIT |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论