selectively import icons

README.md

@@ -147,6 +147,10 @@ You can simply use [Docker](https://www.docker.com) & [Docker Compose](https://d
 git clone git@github.com:kremalicious/portfolio.git
 cd portfolio/
 
+# GATSBY_GITHUB_TOKEN is required for some parts
+cp .env.sample .env
+vi .env
+
 # use Docker
 docker-compose up
 

src/components/atoms/Icon.jsx

@@ -2,31 +2,50 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 // https://featherstyles.com
-import * as Feather from 'react-feather'
+// import * as Feather from 'react-feather'
+import {
+  ArrowDownCircle,
+  Edit,
+  GitHub,
+  Twitter,
+  Rss,
+  Sun,
+  Moon,
+  Compass,
+  FileText,
+  Key,
+  Image
+} from 'react-feather'
 import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 import styles from './Icon.module.scss'
 
 const Icon = ({ name, ...props }) => {
   const components = {
     Dribbble,
-    Link: Feather.Compass,
+    Link: Compass,
-    Download: Feather.ArrowDownCircle,
+    Download: ArrowDownCircle,
-    'Info & Download': Feather.ArrowDownCircle,
+    'Info & Download': ArrowDownCircle,
-    Styleguide: Feather.FileText,
+    Styleguide: FileText,
-    Blog: Feather.Edit,
+    Blog: Edit,
-    Keybase: Feather.Key
+    Keybase: Key,
+    ArrowDownCircle,
+    Edit,
+    GitHub,
+    Twitter,
+    Rss,
+    Sun,
+    Moon,
+    Compass,
+    FileText,
+    Key,
+    Image
   }
 
   const IconMapped = components[name]
-  const Icon = Feather[name]
+  // const IconComp = Feather[name]
+  if (!IconMapped) return null
 
-  if (!IconMapped && !Icon) return null
+  return <IconMapped className={styles.icon} {...props} />
-
-  return IconMapped ? (
-    <IconMapped className={styles.icon} {...props} />
-  ) : (
-    <Icon className={styles.icon} {...props} />
-  )
 }
 
 Icon.propTypes = {