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.

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.

Material Design Icons v2.3.54

Note: v2.3.50 was unpublished due to a bug and replaced by this build.

It has only been 25 days, but we're releasing another update to Material Design Icons. This update includes 111 new icons and 27 icon updates (mostly brand related). This also includes a few renames which are outlined below.

You can view the @mdi NPM Org for the Updates.

Preview on the CDN

9 Renames

While it is rare the team to rename an icon we decided in this release to finally rename icons we've decided in the past not to rename.

  • roomba to robot-vacuum
  • nest-protect to smoke-detector
  • nest-thermostat to thermostat
  • amazon-clouddrive to amazon-drive
  • apple-mobileme to apple-icloud
  • stackexchange to stack-exchange
  • hangouts to google-hangouts
  • allo to google-allo
  • youtube-play to youtube

The first three follow our new guidelines. All home automation icons need to be generic and not related to a specific brand.

All other renames focus on associating the brands under their company and the drive/iCloud renames.

The development server's history makes these changes easier to track and we can't wait until the new site launches.

Future

The next release is focusing on icon contributions, integrations with third parties, and the new website.