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!

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 webpack@4 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.

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?