React Material Design Icons – built with Pixo, Styled Components, and Styled System

Overview

React Material Design Icons

Built with Pixo, Styled Components, and Styled System

https://jxnblk.com/rmdi

npm i rmdi
// import icons individually for better tree-shaking
import Accessibility from 'rmdi/lib/Accessibility'

const App = props => (
  <Accessibility
    size={32}
    color='tomato'
  />
)
// import all icons as a single component
import { Icon } from 'rmdi'

const App = props => (
  <Icon
    name='accessibility'
    size={32}
    color='tomato'
  />
)

List of Icons

See the icon list for a complete list of all icons available

Props

Prop Type Description
size number width and height in pixels
color string fill color, uses Styled System's color function

Spacing Props

Margin can be applied with the following props, which use Styled System's space function. Margin props accept numbers for pixel values, strings with CSS units, or arrays for responsive margin

Prop Description
m margin
mt margin-top
mr margin-right
mb margin-bottom
ml margin-left
mx margin-left and margin-right
my margin-top and margin-bottom

Contributing

npm install

The build process will:

  1. Parse the material-design-icons package for SVG source code
  2. Copy the icons to the svg/ folder
  3. Create an examples/ folder for tests and development
  4. Run Pixo on the svg/ folder and output to src/
  5. Run Babel on the src/ folder and output to lib/

Tests:

npm test

To run the development server:

npm start

Related

MIT License

Issues
  • Tree-shaking not possible

    Tree-shaking not possible

    By reading:

    // import icons individually for better tree-shaking

    I assume you care about tree-shaking. Based on that I'd like to report serious problems with this library's structure that prevents tree-shaking completely.

    Let's examine what happens when we bundle a simple file:

    import { Accessibility } from 'rmdi'
    console.log(Accessibility)
    

    with following config:

    const webpack = require('webpack');
    const path = require('path');
    
    module.exports = {
      mode: 'production',
      entry: './src/index.js',
      output: {
        path: path.resolve(__dirname, "dist"),
        filename: './index-rmdi.js',
      },
      externals: {
        react:'react',
        'react-dom':'reactDom',
        'styled-system':'styledSystem',
        'styled-components':'styledComponents',
      },
    }
    

    We can see by inspecting the output file that nothing really got removed (tree-shaken) out of the bundle and it weighs 100kb minified & gzipped:

    > gzip -c dist/index-rmdi.js | wc -c
    102580
    

    There are several things that could improve the situation:

    • providing a "module" field in package.json that would point to files written using ESM module syntax
    • providing sideEffects: false in package.json that would ensure webpack it can tree-shake your reexporting index.js file (but that's beneficial only for [email protected] users)
    • using babel-plugin-styled-components that would add #__PURE__ annotations to styled calls ensuring UglifyJS that unused outputs can be removed safely
    • using rollup to dedupe common dependencies with its experimentalCodeSplitting feature - atm EACH file duplicates babel helpers such as _extends & _objectWithoutProperties and you have 970~ files (icon components) here
    • there is also problem of static property assignments described by me here. Solutions for this are somewhat not ideal - either produce each component with IIFE that would contain those static assignments (.defaultProps, .displayName) and annotate those IIFEs with #__PURE__ OR ditch .defaultProps in favor of default parameters and wrap .displayName assignments with env check that would strip them down in production bundles.
    opened by Andarist 5
  • Crashes when importing `Icon`

    Crashes when importing `Icon`

    hello mate,

    thanks for this nice little react wrapper around MD icons.

    i'm getting an error when I import the whole Icon component:

    import { Icon } from 'rmdi'
    
    const App = props => (
      <Icon name='close' />
    )
    

    But, this works fine :

    import { Close } from 'rmdi'
    
    const App = props => (
      <Close />
    )
    

    And this also works fine:

    import { Close } from 'rmdi/lib/Close'
    
    const App = props => (
      <Close />
    )
    

    Looking at the index.js in lib, it doesn't seem to have a named Icon export.

    Thanks!

    opened by peduarte 3
  • Different theme providers for different components?

    Different theme providers for different components?

    Hey,

    So I noticed that rmdi uses styled-system, which uses the theme provider (it's by default using the theme provider we already have in our application). That's great! That's powerful. But... I didn't actually tell this library that I wanted to use that.

    Think about this this way: I have some components that follow a pattern from a library. I have other components that follow another. It doesn't seem like any given application supports 2 theme providers at a time. So like... if I grab an external library, and grab it's theme stuff just for THEIR components, there's no way to go "ok only apply this themerprovider to their components". How do I solve for this?

    opened by reywright 1
  • Add bundlesize tests

    Add bundlesize tests

    opened by jxnblk 0
  • FIX: crashes when importing icon

    FIX: crashes when importing icon

    Problem

    The export for the Icon component was incorrect in index.js as it was not returning the default export.

    resolves #8

    What I did

    1. Updated the test to import components from the ./index.js thus testing the public API. And Reproducing the issue.
    2. Updated the ./index.js to export the default export from the Icon component.
    3. Updated the test to pass a name prop when rendering the Icon component.

    Other changes in this branch

    I had to do a few things to get the tests to run:

    1. Added node_modules to .gitignore (weird it wasn't already there πŸ€”)
    2. Updated Jest to 23.5 to resolve an issue in [email protected] - see https://github.com/jsdom/jsdom/issues/2304
    3. Added a package lock file.

    To test

    I have updated the tests to test the public API, so you can just run npm test to see the (passing) state.

    If you'd like to see the failure repro without the fix, you can git checkout 1e62a0e and you will get:

    βœ• Icon renders (7ms)
    
      ● Icon renders
    
        Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    
    opened by theinterned 1
  • Support tree-shaking by providing a module build

    Support tree-shaking by providing a module build

    Bundling a simple file:

    import { Accessibility } from 'rmdi'
    console.log(Accessibility)
    

    before this PR - 102567 bytes after this PR without sideEffects: false - 99674 bytes after this PR with sideEffects: false - 722 bytes

    All measurements done for minified & gzipped files.

    Going further we could use rollup to dedupe babel helpers. I've implemented it here. The overall size goes down to 95973 (from 99674 - comparing "all icons included" bundles). Let me know if you are interested in this commit - I can make it part of this PR or send as a followup later.

    opened by Andarist 1
  • .gitignore node_modules

    .gitignore node_modules

    opened by Andarist 0
Owner
Brent Jackson
Building @system-ui @styled-system, @rebassjs, MDX Deck
Brent Jackson
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 15.8k Oct 13, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 72.2k Oct 13, 2021
A Material-UI File Upload Dropzone

A Material-UI File Upload Dropzone

pandemicode.dev 1 Sep 18, 2021
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 29 Oct 13, 2021
Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Mater

Wertarbyte 419 Oct 3, 2021
β˜„οΈReact Material Admin is a React template built with Material-UI

React Material Admin β€” Material-UI Dashboard Template

Flatlogic 1.2k Oct 17, 2021
Material style image with loading animation

Material UI Image Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern su

Wertarbyte 202 Sep 26, 2021
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Oct 10, 2021
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 Sep 9, 2021
React Bootstrap with Material Design - Powerful and free UI KIT

React Bootstrap with Material Design Built with React and Bootstrap 4. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS an

MDBootstrap 1.2k Oct 10, 2021
React Component that implements a speed dial using Material-UI.

react-speed-dial React Component that implements a speed dial using Material-UI. For Material-UI v1 use material-ui-speed-dial like inbox toolbox vers

Simon Mollweide 57 Oct 2, 2021
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

admin-on-rest A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Desig

marmelab 400 Oct 12, 2021
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.2k Oct 10, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 27 Oct 8, 2021
A customizable floating action button menu that follows material design

react-floating-button-menu A customizable floating action button menu Inspired by react-material-floating-button Install npm install --save react-floa

Alucard 33 Sep 1, 2021
Material design for react, powered by materializecss

react-materialize Material design components for react, powered by materializecss. Install npm install [email protected] npm install react-material

React Materialize 1.4k Oct 18, 2021
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Oct 12, 2021
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 585 Oct 10, 2021
Essence - The Essential Material Design Framework

#[Essence] - The Essential Material Design Framework About Essence Essence is a CSS framework that implements the guidelines from Google Material Desi

Evo Forge 416 Oct 13, 2021