React Icon component example

.js

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.a`
  margin-right:20px;
  :hover{
    path{
      fill:${props => props.hoverFill || props.theme.navy};
    }
  }
`;
class Icon extends React.Component{
  render(){
    const {icon,href,fill,hoverFill,width,height,} = this.props;
    const icons = {
      dribbble: () => {
        return(
          <Wrapper href={href} hoverFill={hoverFill}>
            <svg version="1.1" width={width} height={height} id="Capa_1" x="0px" y="0px"
            	 viewBox="0 0 438.5 438.5">
            <g>
            	<path fill={fill} d="M409.1,109.2c-19.6-33.6-46.2-60.2-79.8-79.8C295.7,9.8,259.1,0,219.3,0c-39.8,0-76.5,9.8-110.1,29.4
            		C75.6,49,49,75.6,29.4,109.2C9.8,142.8,0,179.5,0,219.3c0,39.8,9.8,76.5,29.4,110.1c19.6,33.6,46.2,60.2,79.8,79.8
            		c33.6,19.6,70.3,29.4,110.1,29.4s76.5-9.8,110.1-29.4c33.6-19.6,60.2-46.2,79.8-79.8c19.6-33.6,29.4-70.3,29.4-110.1
            		C438.5,179.5,428.7,142.8,409.1,109.2z M219.3,32c47.2,0,88.4,15.6,123.6,46.8l-3.6,5c-1.4,2-5,5.9-10.7,11.6
            		c-5.7,5.7-11.9,11.1-18.7,16.3c-6.8,5.1-15.9,11-27.6,17.6c-11.6,6.6-24,12.3-37.1,17.3C223.4,106.1,200,69.8,175,37.4
            		C190.1,33.8,204.8,32,219.3,32z M72.5,103.1c18.3-23,40.5-40.7,66.8-53.1c23.6,31.4,46.8,67.4,69.7,107.9
            		c-57.9,15.2-115.5,22.8-173,22.8C42.1,152,54.3,126.1,72.5,103.1z M44.5,286.8C36.2,265.4,32,242.9,32,219.3c0-2.7,0.1-4.7,0.3-6
            		c68.9,0,133-8.8,192.1-26.6c6.1,11.8,11.1,22.4,15.1,31.7c-0.8,0.4-2,0.8-3.7,1.3c-1.7,0.5-3,0.8-3.7,1l-10.6,3.7
            		c-7.2,2.7-16.7,7.2-28.4,13.7c-11.7,6.5-24.1,14.2-37.3,23.1c-13.1,8.9-26.7,20.8-40.7,35.6c-14,14.8-25.7,30.6-35.3,47.5
            		C64.7,327.4,52.9,308.2,44.5,286.8z M219.3,406.6c-44.5,0-84.3-14.3-119.3-42.8l4.3,3.1c6.7-14.7,16.5-28.7,29.4-42.3
            		c12.9-13.5,25.4-24.4,37.4-32.7c12-8.3,25-16.1,39.1-23.4c14.1-7.3,23.7-12,28.8-14c5.1-2,9.2-3.6,12.3-4.7l0.6-0.3h0.6
            		c18.6,48.9,32,96.3,40,142.2C268.8,401.6,244.4,406.6,219.3,406.6z M376.9,320.5c-14.1,21.8-31.7,39.8-52.8,54.1
            		c-7.8-43.8-20-88.4-36.5-133.9c37.9-5.9,76.8-3.1,116.8,8.3C400.1,274.8,391,298.7,376.9,320.5z M403.7,216.7
            		c-1.9-0.4-4.3-0.8-7.1-1.3s-6.3-1-10.4-1.7c-4.1-0.7-8.7-1.3-13.7-1.9c-5-0.6-10.4-1.1-16.1-1.6c-5.7-0.5-11.8-0.9-18.3-1.1
            		c-6.5-0.3-13-0.4-19.7-0.4c-6.7,0-13.7,0.2-21,0.6c-7.3,0.4-14.4,1-21.3,2c-0.6-1-1.3-2.5-2.1-4.7c-0.9-2.2-1.5-3.9-1.8-5
            		c-3.6-8-7.8-17-12.6-27.1c13.1-5.3,25.7-11.5,37.6-18.4c11.9-6.9,21.4-13.1,28.5-18.6c7.1-5.4,13.9-11.2,20.3-17.3
            		c6.4-6.1,10.5-10.3,12.4-12.7c1.9-2.4,3.7-4.7,5.4-7l0.3-0.3c27.8,33.9,42,72.9,42.5,117.1L403.7,216.7z"/>
            </g>
            </svg>
          </Wrapper>
        )
      },
      github: () => {
        return(
          <Wrapper href={href}>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
            	 viewBox="0 0 291.3 291.3" width={width} height={height}>
            <g>
            	<path fill={fill} d="M145.7,0C65.2,0,0,65.2,0,145.7c0,80.4,65.2,145.7,145.7,145.7s145.7-65.2,145.7-145.7
            		C291.3,65.2,226.1,0,145.7,0z M186.5,256.6c-0.8-11.4-1.8-25.5-1.8-31.2c-0.4-4.4-0.8-15.5-11.4-22.7c42.1-3.5,62.1-26.8,63.5-57.5
            		c1.2-17.5-5.8-32.9-18.1-45.3c0.6-13.3-0.4-29-1.3-35.9c-9.5-2.7-31.6,8.9-37.8,13.9c-13-5.1-44.9-6.8-64.3,0
            		c-13.7-9.7-29.4-15.6-37.9-14c-7.9,17.5-2.8,33.9-1.3,35.9c-10.1,9.3-24.3,20.7-20.4,44.6c6.2,35,30.8,53.9,70.5,58.6
            		c-8.5,1.7-9.9,8-10.6,10.8c-26.7,11-34.3-6.8-37.6-11.4c-11.2-13.8-21.2-9.8-21.8-9.6c-0.6,0.2-1.1,1.1-1,1.5c0.6,3,6.7,6,7,6.3
            		c8.3,6.2,11.3,17.3,13.2,20.4c11.8,19.5,39.4,11.4,39.6,11.6c0,1.7-0.2,16-0.4,27.2c-50.2-13.7-87.1-59.5-87.1-114
            		c0-65.4,53-118.3,118.3-118.3S264,80.3,264,145.7C264,196.7,231.7,240,186.5,256.6z"/>
            </g>
            </svg>
          </Wrapper>
        )
      },
      behance: () => {
        return(
          <Wrapper href={href}>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
            	 viewBox="0 0 458.4 458.4" width={width} height={height}>
            <g>
            	<path fill={fill} d="M194,206.6c7.9-12.4,12.5-27.1,12.2-42.9c-0.7-42.3-35.9-75.9-78.2-75.9H10c-5.5,0-10,4.5-10,10v259.6
            		c0,5.5,4.5,10,10,10h131.9c48.9,0,89.5-39.2,89.7-88.2C231.7,249.3,216.8,222.8,194,206.6z M51.8,139.7h77.3
            		c14,0,25.4,11.4,25.4,25.4c0,14-11.4,25.4-25.4,25.4H51.8V139.7z M143,315.7H51.8v-73.5h77.3h14c20.3,0,36.7,16.5,36.7,36.7
            		C179.8,299.2,163.3,315.7,143,315.7z"/>
            	<path fill={fill} d="M458.4,260.9c0-60.4-47.6-109.6-106.2-109.6S246,200.5,246,260.9s47.6,109.6,106.2,109.6
            		c35.5,0,68.6-18.2,88.3-48.7c2.5-3.8,4.7-7.8,6.7-11.9c1.4-3-0.7-6.4-4.1-6.4l-52.2-0.1c-1.2,0-2.2,0.5-3.1,1.3
            		c-9.9,9.6-21.9,14.1-35.7,14.1c-25.9,0-47.7-19.4-53.1-45.3H448c5.7,0,10.4-4.7,10.4-10.4V260.9z M352.2,203.1
            		c19,0,35.8,10.4,45.5,26.1h-91C316.5,213.5,333.2,203.1,352.2,203.1z"/>
            	<path fill={fill} d="M396.4,138.4h-94.2c-4.4,0-8-3.6-8-8v-23.6c0-4.4,3.6-8,8-8h94.2c4.4,0,8,3.6,8,8v23.6
            		C404.3,134.9,400.8,138.4,396.4,138.4z"/>
            </g>
            </svg>
          </Wrapper>
        )
      },
      linkedin: () => {
        return(
          <Wrapper href={href}>
            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
            viewBox="0 0 510 510" width={width} height={height}>
            <g>
              <g id="post-linkedin">
                <path fill={fill} d="M459,0H51C23,0,0,23,0,51v408c0,28,23,51,51,51h408c28,0,51-23,51-51V51C510,23,487,0,459,0z M153,433.5H76.5
                  V204H153V433.5z M114.8,160.6c-25.5,0-45.9-20.4-45.9-45.9s20.4-45.9,45.9-45.9s45.9,20.4,45.9,45.9S140.2,160.6,114.8,160.6z
                  M433.5,433.5H357V298.4c0-20.4-17.9-38.2-38.2-38.2s-38.2,17.9-38.2,38.2v135.1H204V204h76.5v30.6c12.8-20.4,40.8-35.7,63.8-35.7
                  c48.5,0,89.2,40.8,89.2,89.3V433.5z"/>
                </g>
              </g>
            </svg>
          </Wrapper>
        )
      },
      instagram: () => {
        return(
          <Wrapper href={href}>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
            viewBox="0 0 169.1 169.1" width={width} height={height}>
            <g>
              <path fill={fill} d="M122.4,0H46.7C20.9,0,0,20.9,0,46.7v75.8c0,25.7,20.9,46.7,46.7,46.7h75.8c25.7,0,46.7-20.9,46.7-46.7V46.7
                C169.1,20.9,148.1,0,122.4,0z M154.1,122.4c0,17.5-14.2,31.7-31.7,31.7H46.7c-17.5,0-31.7-14.2-31.7-31.7V46.7
                C15,29.2,29.2,15,46.7,15h75.8c17.5,0,31.7,14.2,31.7,31.7L154.1,122.4L154.1,122.4z"/>
                <path fill={fill} d="M84.5,41C60.5,41,41,60.5,41,84.5c0,24,19.5,43.6,43.6,43.6s43.6-19.5,43.6-43.6C128.1,60.5,108.6,41,84.5,41z
                  M84.5,113.1c-15.7,0-28.6-12.8-28.6-28.6C56,68.8,68.8,56,84.5,56s28.6,12.8,28.6,28.6C113.1,100.3,100.3,113.1,84.5,113.1z"/>
                  <path fill={fill} d="M129.9,28.3c-2.9,0-5.7,1.2-7.8,3.2c-2.1,2-3.2,4.9-3.2,7.8c0,2.9,1.2,5.7,3.2,7.8c2,2,4.9,3.2,7.8,3.2
                    c2.9,0,5.7-1.2,7.8-3.2c2.1-2,3.2-4.9,3.2-7.8c0-2.9-1.2-5.7-3.2-7.8C135.7,29.4,132.8,28.3,129.9,28.3z"/>
                  </g>
                </svg>
          </Wrapper>
        )
      },
      twitter: () => {
        return(
          <Wrapper href={href}>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width={width} height={height} x="0px" y="0px"
            	 viewBox="0 0 410.2 341.2">
            <path fill={fill} d="M403.6,39.7c-9.1,4-18.6,7.2-28.3,9.5c10.7-10.2,18.7-22.9,23.3-37.1l0,0c1.3-4.1-3.1-7.6-6.8-5.4l0,0
            	c-13.5,8-28,14-43.2,17.9c-0.9,0.2-1.8,0.3-2.7,0.3c-2.8,0-5.5-1-7.6-2.9C322.2,7.8,301.4,0,279.8,0c-9.3,0-18.8,1.5-28,4.3
            	C223.2,13.2,201,36.9,194.1,66c-2.6,10.9-3.3,21.9-2.1,32.6c0.1,1.2-0.4,2.1-0.8,2.5c-0.6,0.7-1.5,1.1-2.4,1.1c-0.1,0-0.2,0-0.3,0
            	C125.7,96.4,69.1,66.1,29.1,17l0,0c-2-2.5-6-2.2-7.6,0.6l0,0c-7.8,13.4-12,28.8-12,44.5c0,24,9.6,46.6,26.4,63
            	c-7-1.7-13.8-4.3-20.2-7.8l0,0c-3.1-1.7-6.8,0.5-6.9,4l0,0c-0.4,35.6,20.4,67.3,51.6,81.6c-0.6,0-1.3,0-1.9,0c-5,0-10-0.5-14.9-1.4
            	l0,0c-3.4-0.7-6.3,2.6-5.3,6l0,0c10.1,31.7,37.4,55,70,60.3c-27.1,18.2-58.6,27.8-91.4,27.8l-10.2,0c-3.2,0-5.8,2.1-6.6,5.1
            	c-0.8,3,0.7,6.2,3.4,7.7c37,21.5,79.1,32.9,122,32.9c37.5,0,72.5-7.4,104.2-22.1c29-13.4,54.7-32.7,76.3-57.1
            	c20.1-22.8,35.8-49.1,46.7-78.2c10.4-27.7,15.9-57.3,15.9-85.6v-1.3c0-4.5,2.1-8.8,5.6-11.7c13.6-11,25.4-24,35.2-38.6l0,0
            	C411.9,42.6,407.9,37.8,403.6,39.7L403.6,39.7z"/>
            </svg>
          </Wrapper>
        )
      }
    }
    return icons[icon]();
  }
}


export default Icon;