Material JSX Icons
The Material Design Icons Library converted to dependency-free flexible React components using Svg-To-JSX, Babel and Prettier.
How to use
Install the package using npm:
$ npm install --save material-jsx-icons # or $ yarn add material-jsx-icon
Then import in your app all the icons you want to use. They are just functional React components, so you just use them as such.
;;;const App =<div><PersonIcon /><DeleteIcon /></div>;
Now, to maintain flexibility, the Icon component includes no styling or appeareance information at all, not even sizing definitions, so you will have to provide you own styling. There are many options available:
You can pass a className and style it in a separate stylesheet or using css modules.
const App =<div><PersonIcon className='icon icon--person' /><DeleteIcon className='icon icon--delete' /></div>;
You can use in-line styles:
const iconStyles =width: '40px'fill: '#b4d455';const App =<div><PersonIcon style=iconStyles /><DeleteIcon style=iconStyles /></div>;
Or even one of those fancy style-in-js solution that kids like.
;;const StyledPersonIcon = `width: 40px;fill: rebeccapurple;`;const App =<div><StyledPersonIcon /></div>;
💡Tip: The SVGs produced by these components automatically adjusts to the container size while keep its proportions. So: when possible adjust the parent's size instead of the Icon element itself.
The React component automatically forwards all the props to the underlying SVG element so you can set other properties like
<StyledPersonIcon onClick=doSomethingWhenClicked />
Ideally you would just import the icons you need one by one, but if you want to import everything at once for some weird reason, you can do it.
;const App =<div><AllTheIconsPersonIcon /><AllTheIconsAirplayIcon /><AllTheIconsBusinessCenterIcon /><AllTheIconsChevronRightIcon />/*... that's about ~900 icons */</div>;
If you want to build the icon components yourself there are two embarrassing scripts in the
generate.js takes all the 48px production SVG from the
material-design-icons package and transforms it into JSX react components, then uses Babel to transform those to plain ES5.
make-index.js generates the unholy index file.
There's an npm script to run both:
npm run build
I don't own the Copyright for anything, I'm just processing it so it's easier to consume icons one-by-one in React.