Remove global icon imports

.babelrc

@@ -1,10 +1,11 @@
 {
   "presets": [
-    ["@babel/preset-react", {"modules": false}],
-    ["@babel/preset-env", {"modules": false}]
+    ["@babel/preset-react", { "modules": false }],
+    ["@babel/preset-env", { "modules": false }]
   ],
   "plugins": [
     ["babel-plugin-styled-components", { "pure": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    "inline-react-svg"
   ]
 }

README.md

@@ -35,6 +35,12 @@ class Example extends Component {
 
 ## Change log
 
+### 0.14.0
+
+🚀 New Feature
+
+- Export ES6 modules for tree shaking 🌳
+
 ### 0.13.1
 
 🐛 Bug Fix

demo/package.json

@@ -5,10 +5,12 @@
   "dependencies": {
     "react": "link:../node_modules/react",
     "react-dom": "link:../node_modules/react-dom",
-    "react-scripts": "3.1.2",
-    "rimble-ui": "link:.."
+    "react-scripts": "3.4.1",
+    "rimble-ui": "link:..",
+    "source-map-explorer": "^2.1.2"
   },
   "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -28,5 +30,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

demo/src/App.js

@@ -11,7 +11,6 @@ import {
   Flash,
   Flex,
   Heading,
-  Icon,
   Image,
   Input,
   Link,
@@ -36,8 +35,14 @@ import {
   theme,
 } from 'rimble-ui'
 
-import { Eth, Btc } from '@rimble/icons'
-
+import {
+  Accessibility as IconAccessibility,
+  Info as IconInfo,
+  Eth as IconEth,
+  Btc as IconBtc,
+  Dai as IconDai,
+  Rdd as IconRdd,
+} from '@rimble/icons'
 import TestForm from './components/TestForm'
 import BaseLineGrid from './components/BaseLineGrid'
 
@@ -142,7 +147,22 @@ const testComponents = props => (
       quibusdam, assumenda officiis.
     </Text>
 
-    <Button size={'medium'}>Click me!</Button>
+    <Box>
+      <Button size={'medium'}>Click me!</Button>
+    </Box>
+    <Box>
+      <Button size={'medium'} my={2}>
+        <Flex alignItems={'center'}>
+          <IconEth mr={2} />
+          Icon and text button
+        </Flex>
+      </Button>
+    </Box>
+    <Box>
+      <Button size={'small'} p={0}>
+        <IconEth />
+      </Button>
+    </Box>
     <Link>I'm a Link!</Link>
     <EthAddress address="0x99cb784f0429efd72wu39fn4256n8wud4e01c7d2" />
     <EthAddress
@@ -155,33 +175,38 @@ const testComponents = props => (
     <Input placeholder={'placeholder'} />
 
     <Box>
-      <Text>Icon component from rimble-ui</Text>
-      <Icon name={'Info'} />
-      <Icon name={'Eth'} />
-      <Icon name={'Btc'} />
+      <Text>Plain icons</Text>
+      <IconAccessibility />
+      <IconInfo />
+      <IconEth />
+      <IconBtc />
+      <IconDai />
+      <IconRdd />
     </Box>
 
     <Box>
-      <Text>
-        Icon component from rimble-ui using "primary" color from theme
-      </Text>
-      <Icon name={'Info'} color="primary" />
-      <Icon name={'Eth'} color="primary" />
-      <Icon name={'Btc'} color="primary" />
-    </Box>
-    <Box>
-      <Text>Icon component from rimble-ui, color="green"</Text>
-      <Icon name={'Info'} color="green" />
-      <Icon name={'Eth'} color="green" />
-      <Icon name={'Btc'} color="green" />
+      <Text>Colored icons</Text>
+      <IconAccessibility color={'green'} />
+      <IconInfo color={'green'} />
+      <IconEth color={'green'} />
+      <IconBtc color={'green'} />
+      <IconDai color={'green'} />
+      <IconRdd color={'green'} />
     </Box>
+
     <Box>
-      <Text>Icons imported as components from @rimble/icons</Text>
-      <Eth color="primary" />
-      <Btc color="primary" />
-      <Eth color="green" />
-      <Btc color="green" />
+      <Text>Theme-value color (primary)</Text>
+      <Text italic fontSize={1}>
+        Icons do not have a default theme value
+      </Text>
+      <IconAccessibility color={'primary'} />
+      <IconInfo color={'primary'} />
+      <IconEth color={'primary'} />
+      <IconBtc color={'primary'} />
+      <IconDai color={'primary'} />
+      <IconRdd color={'primary'} />
     </Box>
+
     <Tooltip message="Your custom message">
       <span>hover me</span>
     </Tooltip>