add-main-page-visuals

[mar-bi]

Our Main page has several visuals: an image and icons. The latest I'd like to use as icon buttons.

Here I plan to discuss and gather ideas, links, suggestions about where to find these stuff, which one to choose, and how to implement.

[spences10]

I found an awesome post on using SVG icons, here @mar-bi

Really neat, here's the main part:

import React from 'react'

const Icon = props => {
  const styles = {
    svg: {
      display: 'inline-block',
      verticalAlign: 'middle'
    },
    path: {
      fill: props.color
    }
  }

  return (
    <svg
      style={styles.svg}
      width={`${props.size}px`}
      height={`${props.size}px`}
      viewBox="0 0 1024 1024"
    >
      <path style={styles.path} d={props.icon} />
    </svg>
  )
}

Icon.defaultProps = {
  size: 16
}

export default Icon

Then call it <Icon icon={ICONS.EMAIL} size={64} /> you'll need to set up some constants and get the SVGs as well, natch 🙃

[mar-bi]

That's cool. :+1: I'm going to check it right now. Also I walked around this library - React Icons. It has a whole bunch of stuff inside.

Include popular icons in your React projects easly with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
Currently supported icons are:

Material Design Icons by Google https://www.google.com/design/icons/ (licence: CC-BY 4.0)
Font Awesome by Dave Gandy - http://fontawesome.io (licence: SIL OFL 1.1)
Typicons by Stephen Hutchings - http://typicons.com (licence: CC BY-SA)
Github Octicons icons by Github https://octicons.github.com/ (licence: SIL OFL 1.1

The usage is very simple: install - import -use

npm install react-icons --save

import FaBeer from 'react-icons/fa/beer';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

One of Gatsby starters contains it. That's how I found it. :smile:

[spences10]

I found React Icons really annoying to drill down to find the exact icon you wanted to use, it was a while since I used it though, I like the option I linked because you had so much control over it

[mar-bi]

That's great! Thank you for the review. :+1: I was afraid that this React Icon can be unhandy. Let's follow your option. :small_airplane:

[spences10]

Ok, cool 😎

One thing to bear in mind ould be that React Icons is all of:

Material Design Icons by Google https://www.google.com/design/icons/ (licence: CC-BY 4.0)
Font Awesome by Dave Gandy - http://fontawesome.io (licence: SIL OFL 1.1)
Typicons by Stephen Hutchings - http://typicons.com (licence: CC BY-SA)
Github Octicons icons by Github https://octicons.github.com/ (licence: SIL OFL 1.1

Whilst the icons we would want to use will be a fraction of them all 🤔

[mar-bi]

We need to extract 5+ icons from all this pool. :no_mouth: However, this pool does exists. There are free icons with normal license and no attribution, I think. A half of the task for searching icons is done. :smile:

[mar-bi]

I need the same library for images :laughing: Is there any React Images? :thinking:

[mar-bi]

@spences10, I read yesterday this really very awesome post you suggested. :+1: I like the way how we can deal with .svg icons very much. It is quite easy and lightweight - we will add only icons we need. The author also suggests a great resource for icons - IcoMoon. I picked up some icons from there. I will show you what I've chosen. :smile:

[spences10]

Yeah icomoon is where I got all the fa icons

Which ones have you chosen?

[mar-bi]

These 17 icons. We need to choose from them 5 for the main page. Basically, the icons are for jobs, learn, support, share, community.

[spences10]

Cool, ok, so we can go ahead and make constants.js with all the icon svg in there and create a icons.js for the component?

[mar-bi]

Right. Let's create them.

[spences10]

@mar-bi I presume you have all the SVGs you need now?

I also presume this means you're claiming this piece? 😎

[mar-bi]

Yes, you are right. :+1: I have the SVG's for the main page. I picked up a bit more than the page needs. I'm going to create an issue and present all them there giving a chance for all of us to choose the best icons. Of course, I'd like to handle constants.js and icons.js :sunglasses:

[mar-bi]

As we have got our nice icons and an impressive image for Main Hero, I close this issue. The addition of icons goes to #131 .