import React from 'react';

const Icon = ({
  name,
  style,
  className = '',
  n = false,
  xs = false,
  s = false,
  m = true,
  l = false,
  x = false,
  xl = false,
  xxl = false,
}) => {
  let size = '';
  size = (n) ? 'icon-n' : size;
  size = (xs) ? 'icon-xs' : size;
  size = (s) ? 'icon-s' : size;
  size = (m) ? 'icon-m' : size;
  size = (l) ? 'icon-l' : size;
  size = (x) ? 'icon-x' : size;
  size = (xl) ? 'icon-xl' : size;
  size = (xxl) ? 'icon-xxl' : size;
  return (
    <i className={`icon ${size} material-icons ${className}`} style={style}>{ name }</i>
  );
};

export default Icon;

@@ -21,16 +21,39 @@
 eact';%0A%0A
+import './Icon.sass';%0A%0A
 const Ic
@@ -99,21 +99,8 @@
 '',%0A
-  n = false,%0A
   xs
@@ -116,33 +116,9 @@
 %0A  s
- = false,%0A  m = true,%0A  l
+m
  = f
@@ -125,17 +125,18 @@
 alse,%0A  
-x
+md
  = false
@@ -139,18 +139,18 @@
 alse,%0A  
-x
 l
+g
  = false
@@ -153,17 +153,16 @@
 alse,%0A  
-x
 xl = fal
@@ -191,41 +191,16 @@
  = '
-';%0A  size = (n) ? 'icon-n' : size
+icon-md'
 ;%0A  
@@ -242,16 +242,17 @@
 ize = (s
+m
 ) ? 'ico
@@ -254,16 +254,17 @@
  'icon-s
+m
 ' : size
@@ -276,16 +276,17 @@
 ize = (m
+d
 ) ? 'ico
@@ -288,16 +288,17 @@
  'icon-m
+d
 ' : size
@@ -310,16 +310,17 @@
 ize = (l
+g
 ) ? 'ico
@@ -326,40 +326,9 @@
 on-l
-' : size;%0A  size = (x) ? 'icon-x
+g
 ' : 
@@ -371,44 +371,8 @@
 ze;%0A
-  size = (xxl) ? 'icon-xxl' : size;%0A
   re
@@ -401,21 +401,8 @@
 e=%7B%60
-icon $%7Bsize%7D 
 mate
@@ -411,16 +411,29 @@
 al-icons
+ icon $%7Bsize%7D
  $%7Bclass

Refactor icon