react-material-iconic-font
Material Iconic Font in React components
Install
npm i react-material-iconic-font --save
Peer Dependencies
- react - >= 15
- react-dom - >= 15
- material-design-iconic-font - 2.2.x
Usage
import React from 'react';import render from 'react-dom';import MaterialIcon from 'react-material-iconic-font'; const AddButton = children ...props <button ="button" > <MaterialIcon ="plus" /> children </button>; ;
Using icon "stacks"
;;; const ShareButton = <button type="button" ...props> <MaterialIconStack> <MaterialIcon type="square-o" stackSize=2 /> <MaterialIcon type="share" stackSize=1 /> </MaterialIconStack> children </button>; ;
Passing HTML attributes
const AddButton = <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 />
License
MIT