simplify icon component

content/meta.yml

@@ -7,7 +7,7 @@
   img: ../src/images/twitter-card.png
 
   social:
-    Email: mailto:m@kretschmann.io
+    Mail: mailto:m@kretschmann.io
     Blog: https://kremalicious.com
     Twitter: https://twitter.com/kremalicious
     GitHub: https://github.com/kremalicious

content/projects.yml

@@ -9,24 +9,24 @@
     Initial website in collaboration with [Balance](https://balance.io/). Key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).
   links:
     - title: oceanprotocol.com
-      icon: website
+      icon: Compass
       url: https://oceanprotocol.com
     - title: Styleguide
       url: https://oceanprotocol.com/art
     - title: docs.oceanprotocol.com
-      icon: website
+      icon: Compass
       url: https://docs.oceanprotocol.com
     - title: commons.oceanprotocol.com
-      icon: website
+      icon: Compass
       url: https://commons.oceanprotocol.com
     - title: '@oceanprotocol/art'
-      icon: github
+      icon: GitHub
       url: https://github.com/oceanprotocol/art
     - title: '@oceanprotocol/docs'
-      icon: github
+      icon: GitHub
       url: https://github.com/oceanprotocol/docs
     - title: '@oceanprotocol/commons'
-      icon: github
+      icon: GitHub
       url: https://github.com/oceanprotocol/commons
   techstack:
     - Sketch
@@ -267,7 +267,7 @@
 
   links:
     - title: Info & Download
-      icon: download
+      url: https://kremalicious.com/ipixelpad/
 
 - title: Out Of Whale Oil
   slug: /outofwhaleoil/
@@ -276,7 +276,7 @@
     Tribute wallpaper pack inspired by the Futurama movie _Into The Wild Green Yonder_. Released as a goodie on [kremalicious.com](https://kremalicious.com/out-of-whale-oil/).
   links:
     - title: Info & Download
-      icon: download
+      url: https://kremalicious.com/out-of-whale-oil/
   techstack:
     - Photoshop
 
@@ -318,7 +318,6 @@
 
   links:
     - title: Info & Download
-      icon: download
       url: https://kremalicious.com/coffee-cup-icon/
 
 - title: Project Purple
@@ -334,7 +333,6 @@
 
   links:
     - title: Info & Download
-      icon: download
       url: https://kremalicious.com/projectpurple/
 
 - title: Allinnia Creative Group

src/components/atoms/Icon.jsx

@@ -2,63 +2,31 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 // https://featherstyles.com
-import {
+import * as Feather from 'react-feather'
-  Star,
-  FileText,
-  Compass,
-  ArrowDownCircle,
-  Info,
-  GitHub,
-  Mail,
-  Feather,
-  Twitter,
-  Image,
-  Moon,
-  Sun,
-  Key
-} from 'react-feather'
 import { ReactComponent as Dribbble } from '../../images/dribbble.svg'
 import styles from './Icon.module.scss'
 
 const Icon = ({ name, ...props }) => {
-  switch (name) {
+  const components = {
-    case 'website':
+    Dribbble,
-    case 'Link':
+    Link: Feather.Compass,
-      return <Compass className={styles.icon} {...props} />
+    Download: Feather.ArrowDownCircle,
-    case 'github':
+    'Info & Download': Feather.ArrowDownCircle,
-    case 'GitHub':
+    Styleguide: Feather.FileText,
-      return <GitHub className={styles.icon} {...props} />
+    Blog: Feather.Edit,
-    case 'dribbble':
+    Keybase: Feather.Key
-    case 'Dribbble':
-      return <Dribbble className={styles.icon} {...props} />
-    case 'info':
-    case 'Info':
-      return <Info className={styles.icon} {...props} />
-    case 'download':
-    case 'Download':
-      return <ArrowDownCircle className={styles.icon} {...props} />
-    case 'styleguide':
-    case 'Styleguide':
-      return <FileText className={styles.icon} {...props} />
-    case 'Email':
-      return <Mail className={styles.icon} {...props} />
-    case 'Blog':
-      return <Feather className={styles.icon} {...props} />
-    case 'Twitter':
-      return <Twitter className={styles.icon} {...props} />
-    case 'Keybase':
-      return <Key className={styles.icon} {...props} />
-    case 'star':
-      return <Star className={styles.icon} {...props} />
-    case 'image':
-      return <Image className={styles.icon} {...props} />
-    case 'day':
-      return <Sun className={styles.icon} {...props} />
-    case 'night':
-      return <Moon className={styles.icon} {...props} />
-    default:
-      return null
   }
+
+  const IconMapped = components[name]
+  const Icon = Feather[name]
+
+  if (!IconMapped && !Icon) return null
+
+  return IconMapped ? (
+    <IconMapped className={styles.icon} {...props} />
+  ) : (
+    <Icon className={styles.icon} {...props} />
+  )
 }
 
 Icon.propTypes = {

src/components/atoms/Icon.test.jsx

@@ -5,25 +5,16 @@ import Icon from './Icon'
 
 describe('Icon', () => {
   it('renders correctly', () => {
-    const { container, rerender } = render(<Icon name={'website'} />)
+    const { container, rerender } = render(<Icon name={'Compass'} />)
     expect(container.firstChild.nodeName).toBe('svg')
 
-    rerender(<Icon name={'github'} />)
+    rerender(<Icon name={'Dribbble'} />)
     expect(container.firstChild.nodeName).toBe('svg')
 
-    rerender(<Icon name={'dribbble'} />)
+    rerender(<Icon name={'Download'} />)
     expect(container.firstChild.nodeName).toBe('svg')
 
-    rerender(<Icon name={'info'} />)
+    rerender(<Icon name={'Styleguide'} />)
-    expect(container.firstChild.nodeName).toBe('svg')
-
-    rerender(<Icon name={'download'} />)
-    expect(container.firstChild.nodeName).toBe('svg')
-
-    rerender(<Icon name={'styleguide'} />)
-    expect(container.firstChild.nodeName).toBe('svg')
-
-    rerender(<Icon name={'Email'} />)
     expect(container.firstChild.nodeName).toBe('svg')
 
     rerender(<Icon name={'Blog'} />)
@@ -33,7 +24,7 @@ describe('Icon', () => {
     expect(container.firstChild.nodeName).toBe('svg')
   })
 
-  it('does not render with unknown type', () => {
+  it('does not render with unknown name', () => {
     const { container } = render(<Icon name={'whatever'} />)
     expect(container.firstChild).not.toBeInTheDocument()
   })

src/components/molecules/Repository.jsx

@@ -34,16 +34,16 @@ export default function Repository({ repo }) {
           : !isExternal &&
             homepage && (
               <a href={homepage}>
-                <Icon name="website" /> More info
+                <Icon name="Compass" /> More info
               </a>
             )}
 
         <a href={html_url}>
-          <Icon name="github" /> GitHub
+          <Icon name="GitHub" /> GitHub
         </a>
 
         <a href={`${html_url}/stargazers`}>
-          <Icon name="star" /> {stargazers_count}
+          <Icon name="Star" /> {stargazers_count}
         </a>
       </p>
     </div>

src/components/molecules/ThemeSwitch.jsx

@@ -11,9 +11,9 @@ const Animation = posed.aside(fadeIn)
 
 const ThemeToggle = ({ dark }) => (
   <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
-    <Icon name="day" className={!dark ? null : 'active'} />
+    <Icon name="Sun" className={!dark ? null : 'active'} />
     <span className={styles.checkboxFake} />
-    <Icon name="night" className={dark ? 'active' : null} />
+    <Icon name="Moon" className={dark ? 'active' : null} />
   </span>
 )
 

src/hooks/use-meta.js

@@ -23,7 +23,7 @@ const query = graphql`
         }
       }
       social {
-        Email
+        Mail
         Blog
         Twitter
         GitHub

src/pages/index.jsx

@@ -43,7 +43,7 @@ function Project({ node, images }) {
             className={styles.imageCount}
             title={`${imageCount} project images`}
           >
-            <Icon name="image" /> {imageCount}
+            <Icon name="Image" /> {imageCount}
           </small>
         )}
       </Link>