Release of @mdi/react

Today we released the first version of the @mdi/react NPM package. Hoping this helps with adoption of Material Design Icons in exisiting ReactJS projects.

npm install @mdi/react

MaterialDesign-React

import Icon from '@mdi/react'
import { mdiAccount, mdiLoading } from '@mdi/js'

const Example = (props) => (
  <div>
    <Icon path={mdiAccount}/>
    <Icon path={mdiLoading} spin/>
  </div>
)

Props

path: string - SVG path data. Usually from @mdi/js
size: number, string (1) - {size * 1.5}rem
horizontal: bool (false) - Flip Horizontal
vertical: bool (false) - Flip Vertical
rotate: number (0) - degrees 0 to 360
color: string (#000) - Ex: rgb() / rgba() / #000
spin: bool, number (false) - Ex: true = 2s, {spin}s

@mdi/js ?

The @mdi/js package contains all the icons after each release as both CommonJS for Node and a module for use with import/export. Ideal for TypeScript and ES6 developers.

What about x Framework

The team is working on VueJS and Angular 6 components that will offer similar functionality. In the future we'll hopefully get to other more niche frameworks.

PrismJS VS Code Dark Theme

This blog post is used to test the PrismJS VS Code dark theme that this blog uses.

A lot of attention to detail around JSX, JavaScript, TypeScript and HTML has been carefully crafted to match VS Code. Lot of random ugly hacky CSS is used to handle most of the common uses cases in JSX.

import * as foo from '@foo/bar'
import foo from '@foo/bar'
import { foo } from '@foo/bar'

export default class foo extends something {
  func() {
    // testing
    /* testing */
    const foo = 'bar';
    let bar = true;
    var test = { object: "test" };
    var jar = 2;
    var a = () => { return 'test'; };
    var b = function() { return 'test'; };
    var b = function foo() { return 'test'; };
    return (
      <Test foo={'test'}
          bar={true}
          test={{ object: "test" }}
          jar={2}/>
      <a href="#">Test</a>
    )
  }
}

Release of @mdi/js

Backported to v2.5.94 developers will now have access to MDI through @mdi/js for use in their projects.

We are in the process of writing first party components for each of the main frameworks with the communities help (and updating 3rd party components to use @mdi/js).

A basic example for React would look like below.

import { mdiAccount } from '@mdi/js'

function Icon(props) {
  return (
    <svg viewBox="0 0 24 24"
      style={{ width: '1.5rem' }}>
      <path d={props.path}/>
    </svg>
  )
}

function App(props) {
  return (
    <Icon path={mdiAccount}/>
  )
}

Importing only the icons you need will ensure shaking works out of the box for Webpack and Rollup.

We're in the process of working on the new website and wrapping up the release for v2.6.xx. A helper package @mdi/meta will also be releasing shortly that contains the meta.json from @mdi/svg including all the website's icon data for 3rd party apps.