Update to @mdi/react v1.1.0

Spent this Saturday going through a large backlog of Open Source tasks. One of them is fixing a bug in @mdi/react.

View @mdi/react on NPM

This library is used by ReactJS developers to quickly render icon path data with a lot of nice helper props.

  • Fixed a bug with horizontal and vertical being ignored.
  • Added support for spin prop that allows a negative value.
    • Negatives values will rotate counterclockwise -X seconds.
    • Positive values rotate clockwise.
    • Still defaults to 2 seconds rotation speed clockwise for true.
  • Fixed a edge case nesting horizontal and spin in a stack. I doubt anyone ran into this since this was also broken by the first bug.
<Icon path={mdiLoading} spin={-2}/>

This component should be considered feature complete now. This means all new code changes will be to optimize the Unit Tests and ensure the outputted markup is as optimized as possible.

Material Design Icons v3.0.39

Material Design Icons released with 145 icons and updated several older icons. The team is very excited to finally have the 3.0 release out only 1 month after the 2.8.94 release.

Our goal was to fix some of the outstanding issues and add a lot of the outline variants of many of the existing icons. This will be a continued goal as we reach 4000 icons.

  • fridge-filled renamed to fridge.
  • fridge renamed to fridge-outline.
  • tooltip-outline-plus renamed to tooltip-plus-outline
  • script was updated will an solid and outline style.
  • eventbrite Updated with latest logo.
  • diamond renamed to diamond-stone
    • Also added diamond and outline as shapes.

Documentation

Really proud of the teams work to improve the documentation.

View the new Documentation

All of these docs are stored in GitHub and can be edited in markdown. This allows for richer formatting and more specific doc pages for various frameworks.

Website Updates

We're very focused working on the new site. In addtion to adding mere aliases and cleaning up tagging the icons will be getting styles assigned for future searching.

This means for example account-circle-outline will have the styles listed circle and outline. There are a lot of plans to use these new properties to allow more clean searching and tracking of missing icons.

Basically there can be a grid of missing variants for each base icon now for us to work toward filling in, so that each icon has as many style variations as possible. This will allow more consistent UI's going forward.

Thanks!

I tell our core team all the time, but also want to say thanks to all the open source projects that continue to use the icons and the individual developers for all the suggestions and feedback. Especially those that have submitted PR's to the new documentation.

Material Design Icons v2.8.94

Material Design Icons released with 100 icons and updated several older icons.

With the next release being the 3.x.xx we're excited to get through the backlog and continue focus on the website and tooling to empower developers and designers.

  • alpha-a to alpha-z with boxes were added.
  • numeric-0 to numeric-9 were added.
  • uber Updated with latest logo.
  • bullhorn Updated with a cleaner design.
  • google-fit Updated with latest logo.
  • hexagon-slice-5 Glyph oversight fixed.

Documentation

With this release we've also removed the getting started page from the current site and are linking to the development server.

View the new Documentation

All of these docs are stored in GitHub and can be edited in markdown. This allows for richer formatting and more specific doc pages for various frameworks.

Material Design Icons v2.7.94

Material Design Icons released with 100 new icons and several renames.

  • phone-locked renamed to phone-lock
  • email-secure renamed to email-lock
  • send-secure renamed to send-lock
  • book-secure renamed to book-lock
  • book-unsecure renamed to book-lock-open
  • account-settings-variant replaced with account-details
    • This was removed as we standardized on ... for settings related icons to be inline with the Material Design guidelines.
  • Various bell icons were updated to match the official updates.

Reminder we support several libraries to help developers.

  • @mdi/js All the icons for JavaScript and TypeScript developers
  • @mdi/react React component with full TypeScript support
  • @mdi/font Webfont with all glyphs
  • @mdi/angular-material For use with Angular Material.
  • @mdi/util Helper library for working with NodeJS and @mdi/svg.
  • @mdi/svg Release of all icons in individual SVG files with the sites meta data, like aliases and tags.

Note: The Angular and VueJS components are still under development.

The new site is still under development, but has been slow as summer wraps up. Prioritization on components and icon releases still comes first.

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.