BREAKING CHANGE: Enabled to use react-icons

* chore: yarn add react-icons * feat: add some icons from react-icons/fa * refactor: change props of original icon BREAKING CHANGE: original icon gets the same props as react-icons * chore: update snapshot * chore: export Icon component * fix: remove 'Base', 'Icon' from IGNORE_DIRS
kufu · Aug 6, 2019 · a60ab19 · a60ab19
1 parent 3e4ea2c
commit a60ab19
Show file tree

Hide file tree

Showing 13 changed files with 187 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "dependencies": {
     "lodash.merge": "^4.6.1",
     "lodash.range": "^3.2.0",
-    "polished": "^3.4.1"
+    "polished": "^3.4.1",
+    "react-icons": "^3.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -24,9 +24,8 @@ class CheckboxComponent extends React.PureComponent<Props & InjectedProps> {
           <IconWrap>
             <Icon
               name="check"
-              width={12}
-              height={12}
-              fill={themeColor === 'light' ? '#fff' : theme.palette.Main}
+              size={12}
+              color={themeColor === 'light' ? '#fff' : theme.palette.Main}
             />
           </IconWrap>
         )}

diff --git a/src/components/Checkbox/__test__/__snapshots__/index.test.tsx.snap b/src/components/Checkbox/__test__/__snapshots__/index.test.tsx.snap
@@ -270,19 +270,17 @@ exports[`Checkbox should be match snapshot 1`] = `
                 className="sc-htpNat oRUBv"
               >
                 <Component
-                  fill="#fff"
-                  height={12}
+                  color="#fff"
                   name="check"
-                  width={12}
+                  size={12}
                 >
                   <Component
-                    fill="#fff"
-                    height={12}
-                    width={12}
+                    color="#fff"
+                    size={12}
                   >
                     <CheckIcon
-                      fill="#fff"
-                      height={12}
+                      color="#fff"
+                      size={12}
                       theme={
                         Object {
                           "frame": Object {
@@ -344,7 +342,6 @@ exports[`Checkbox should be match snapshot 1`] = `
                           },
                         }
                       }
-                      width={12}
                     >
                       <svg
                         height="12px"

diff --git a/src/components/Flash/Flash.tsx b/src/components/Flash/Flash.tsx
@@ -65,10 +65,10 @@ class FlashComponent extends React.PureComponent<MergedProps, State> {
 
     return (
       <Wrapper className={type} theme={theme}>
-        <Icon name={iconName} width={24} height={24} fill="#fff" />
+        <Icon name={iconName} size={24} color="#fff" />
         <Txt theme={theme}>{text}</Txt>
         <CloseButton onClick={onClose} className="close">
-          <Icon name="cross" width={12} height={12} fill={theme.palette.Border} />
+          <Icon name="cross" size={12} color={theme.palette.Border} />
         </CloseButton>
       </Wrapper>
     )

diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
@@ -7,13 +7,65 @@ import { Icon, Props } from './Icon'
 const Wrapper = ({ children }: any) => <Container>{children}</Container>
 const black = '#222'
 const white = '#eee'
-const icons: Array<Props['name']> = ['check', 'check-circle', 'cross', 'exclamation-triangle']
+const icons: Array<Props['name']> = [
+  'check',
+  'check-circle',
+  'cross',
+  'exclamation-triangle',
+  'exclamation-triangle',
+  'fa-address-book',
+  'fa-address-card',
+  'fa-angle-double-down',
+  'fa-angle-down',
+  'fa-arrow-circle-down',
+  'fa-arrow-down',
+  'fa-birthday-cake',
+  'fa-building',
+  'fa-calendar-alt',
+  'fa-caret-down',
+  'fa-chart-area',
+  'fa-chart-bar',
+  'fa-chart-line',
+  'fa-chart-pie',
+  'fa-cog',
+  'fa-databas',
+  'fa-ellipsis-h',
+  'fa-envelope',
+  'fa-file',
+  'fa-file-alt',
+  'fa-file-archive',
+  'fa-file-download',
+  'fa-file-export',
+  'fa-file-import',
+  'fa-file-upload',
+  'fa-filter',
+  'fa-font',
+  'fa-grip-vertical',
+  'fa-lock',
+  'fa-lock-open',
+  'fa-pencil-alt',
+  'fa-plus',
+  'fa-plus-circle',
+  'fa-question-circle',
+  'fa-reg-calendar-check',
+  'fa-reg-chart-bar',
+  'fa-reg-image',
+  'fa-search',
+  'fa-sliders-h',
+  'fa-sort',
+  'fa-sync-alt',
+  'fa-table',
+  'fa-th-list',
+  'fa-user-alt',
+  'fa-user-circle',
+  'fa-users',
+]
 
-const getIconList = (bg: string, fill?: string) =>
+const getIconList = (bg: string, color?: string) =>
   icons.map(name => (
-    <IconWrap key={`${fill}-${name}`} bg={bg}>
-      <Icon name={name} fill={fill} />
-      <IconName color={fill}>{name}</IconName>
+    <IconWrap key={`${color}-${name}`} bg={bg}>
+      <Icon name={name} color={color} />
+      <IconName color={color}>{name}</IconName>
     </IconWrap>
   ))
 

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,14 +1,60 @@
 import * as React from 'react'
-
+import {
+  FaAddressBook,
+  FaAddressCard,
+  FaAngleDoubleDown,
+  FaAngleDown,
+  FaArrowCircleDown,
+  FaArrowDown,
+  FaBirthdayCake,
+  FaBuilding,
+  FaCalendarAlt,
+  FaCaretDown,
+  FaChartArea,
+  FaChartBar,
+  FaChartLine,
+  FaChartPie,
+  FaCog,
+  FaDatabase,
+  FaEllipsisH,
+  FaEnvelope,
+  FaFile,
+  FaFileAlt,
+  FaFileArchive,
+  FaFileDownload,
+  FaFileExport,
+  FaFileImport,
+  FaFileUpload,
+  FaFilter,
+  FaFont,
+  FaGripVertical,
+  FaLock,
+  FaLockOpen,
+  FaPencilAlt,
+  FaPlus,
+  FaPlusCircle,
+  FaQuestionCircle,
+  FaRegCalendarCheck,
+  FaRegChartBar,
+  FaRegImage,
+  FaSearch,
+  FaSlidersH,
+  FaSort,
+  FaSyncAlt,
+  FaTable,
+  FaThList,
+  FaUserAlt,
+  FaUserCircle,
+  FaUsers,
+} from 'react-icons/fa'
 import { Check } from './svg/Check'
 import { CheckCircle } from './svg/CheckCircle'
 import { Cross } from './svg/Cross'
 import { ExclamationTriangle } from './svg/ExclamationTriangle'
 
 export interface IconProps {
-  fill?: string
-  width?: number
-  height?: number
+  color?: string
+  size?: number
 }
 
 export interface Props extends IconProps {
@@ -20,8 +66,53 @@ const iconMap = {
   'check-circle': CheckCircle,
   cross: Cross,
   'exclamation-triangle': ExclamationTriangle,
+  'fa-address-book': FaAddressBook,
+  'fa-address-card': FaAddressCard,
+  'fa-angle-double-down': FaAngleDoubleDown,
+  'fa-angle-down': FaAngleDown,
+  'fa-arrow-circle-down': FaArrowCircleDown,
+  'fa-arrow-down': FaArrowDown,
+  'fa-birthday-cake': FaBirthdayCake,
+  'fa-building': FaBuilding,
+  'fa-calendar-alt': FaCalendarAlt,
+  'fa-caret-down': FaCaretDown,
+  'fa-chart-area': FaChartArea,
+  'fa-chart-bar': FaChartBar,
+  'fa-chart-line': FaChartLine,
+  'fa-chart-pie': FaChartPie,
+  'fa-cog': FaCog,
+  'fa-databas': FaDatabase,
+  'fa-ellipsis-h': FaEllipsisH,
+  'fa-envelope': FaEnvelope,
+  'fa-file': FaFile,
+  'fa-file-alt': FaFileAlt,
+  'fa-file-archive': FaFileArchive,
+  'fa-file-download': FaFileDownload,
+  'fa-file-export': FaFileExport,
+  'fa-file-import': FaFileImport,
+  'fa-file-upload': FaFileUpload,
+  'fa-filter': FaFilter,
+  'fa-font': FaFont,
+  'fa-grip-vertical': FaGripVertical,
+  'fa-lock': FaLock,
+  'fa-lock-open': FaLockOpen,
+  'fa-pencil-alt': FaPencilAlt,
+  'fa-plus': FaPlus,
+  'fa-plus-circle': FaPlusCircle,
+  'fa-question-circle': FaQuestionCircle,
+  'fa-reg-calendar-check': FaRegCalendarCheck,
+  'fa-reg-chart-bar': FaRegChartBar,
+  'fa-reg-image': FaRegImage,
+  'fa-search': FaSearch,
+  'fa-sliders-h': FaSlidersH,
+  'fa-sort': FaSort,
+  'fa-sync-alt': FaSyncAlt,
+  'fa-table': FaTable,
+  'fa-th-list': FaThList,
+  'fa-user-alt': FaUserAlt,
+  'fa-user-circle': FaUserCircle,
+  'fa-users': FaUsers,
 }
-
 export const Icon: React.FC<Props> = ({ name, ...props }) => {
   const SvgIcon = iconMap[name]
   return <SvgIcon {...props} />

diff --git a/src/components/Icon/svg/Check.tsx b/src/components/Icon/svg/Check.tsx
@@ -3,18 +3,13 @@ import * as React from 'react'
 import { InjectedProps, withTheme } from '../../../hocs/withTheme'
 import { IconProps } from '../Icon'
 
-const CheckIcon: React.FC<IconProps & InjectedProps> = ({
-  width = 16,
-  height = 16,
-  fill,
-  theme,
-}) => (
-  <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 100 100">
+const CheckIcon: React.FC<IconProps & InjectedProps> = ({ size = 16, color, theme }) => (
+  <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 100 100">
     <title>check</title>
     <g id="Check">
       <path
         d="M100,26.06a6.2,6.2,0,0,1-1.81,4.5L51.48,78.44l-8.77,9a6.1,6.1,0,0,1-8.77,0l-8.78-9L1.81,54.5a6.5,6.5,0,0,1,0-9l8.77-9A5.88,5.88,0,0,1,15,34.66a5.86,5.86,0,0,1,4.38,1.85L38.32,56,80.65,12.57a6.1,6.1,0,0,1,8.77,0l8.77,9A6.19,6.19,0,0,1,100,26.06Z"
-        fill={fill ? fill : theme.palette.TextGrey}
+        fill={color ? color : theme.palette.TextGrey}
         style={{ fillRule: 'evenodd' }}
       />
     </g>

diff --git a/src/components/Icon/svg/CheckCircle.tsx b/src/components/Icon/svg/CheckCircle.tsx
@@ -3,18 +3,13 @@ import * as React from 'react'
 import { InjectedProps, withTheme } from '../../../hocs/withTheme'
 import { IconProps } from '../Icon'
 
-const CheckCircleIcon: React.FC<IconProps & InjectedProps> = ({
-  width = 16,
-  height = 16,
-  fill,
-  theme,
-}) => (
-  <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 100 100">
+const CheckCircleIcon: React.FC<IconProps & InjectedProps> = ({ size = 16, color, theme }) => (
+  <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 100 100">
     <title>check circle</title>
     <g id="Check_Circle">
       <path
         d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM75.21,41.7l-28,28.24a5,5,0,0,1-3.55,1.47h0A5,5,0,0,1,40,69.9l-15.58-16a5,5,0,0,1,7.16-7l12,12.33L68.11,34.65a5,5,0,0,1,7.1,7.05Z"
-        fill={fill ? fill : theme.palette.TextGrey}
+        fill={color ? color : theme.palette.TextGrey}
         style={{ fillRule: 'evenodd' }}
       />
     </g>

diff --git a/src/components/Icon/svg/Cross.tsx b/src/components/Icon/svg/Cross.tsx
@@ -3,18 +3,13 @@ import * as React from 'react'
 import { InjectedProps, withTheme } from '../../../hocs/withTheme'
 import { IconProps } from '../Icon'
 
-const CrossIcon: React.FC<IconProps & InjectedProps> = ({
-  width = 16,
-  height = 16,
-  fill,
-  theme,
-}) => (
-  <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 100 100">
+const CrossIcon: React.FC<IconProps & InjectedProps> = ({ size = 16, color, theme }) => (
+  <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 100 100">
     <title>cross</title>
     <g id="Cross">
       <path
         d="M60.61,50,97.8,12.8A7.5,7.5,0,1,0,87.2,2.2L50,39.39,12.8,2.2A7.5,7.5,0,0,0,2.2,12.8L39.39,50,2.2,87.2A7.5,7.5,0,1,0,12.8,97.8L50,60.61,87.2,97.8A7.5,7.5,0,0,0,97.8,87.2Z"
-        fill={fill ? fill : theme.palette.TextGrey}
+        fill={color ? color : theme.palette.TextGrey}
       />
     </g>
   </svg>

diff --git a/src/components/Icon/svg/ExclamationTriangle.tsx b/src/components/Icon/svg/ExclamationTriangle.tsx
@@ -4,17 +4,16 @@ import { InjectedProps, withTheme } from '../../../hocs/withTheme'
 import { IconProps } from '../Icon'
 
 const ExclamationTriangleIcon: React.FC<IconProps & InjectedProps> = ({
-  width = 16,
-  height = 16,
-  fill,
+  size = 16,
+  color,
   theme,
 }) => (
-  <svg width={`${width}px`} height={`${height}px`} viewBox="0 0 100 100">
+  <svg width={`${size}px`} height={`${size}px`} viewBox="0 0 100 100">
     <title>exclamation triangle</title>
     <g id="Exclamation_Triangle">
       <path
         d="M98.72,80.6l-40-70.79a9.74,9.74,0,0,0-16.93,0L1.3,80.57A9.73,9.73,0,0,0,9.75,95.13h80.5A9.73,9.73,0,0,0,98.72,80.6ZM45,36.33a5,5,0,0,1,10,0V58.67a5,5,0,0,1-10,0Zm5.11,43.82a5.62,5.62,0,1,1,5.61-5.62A5.62,5.62,0,0,1,50.11,80.15Z"
-        fill={fill ? fill : theme.palette.TextGrey}
+        fill={color ? color : theme.palette.TextGrey}
         style={{ fillRule: 'evenodd' }}
       />
     </g>

diff --git a/src/index.test.ts b/src/index.test.ts
@@ -5,7 +5,7 @@ import fs from 'fs'
 const readFile = util.promisify(fs.readFile)
 const readdir = util.promisify(fs.readdir)
 
-const IGNORE_DIRS = ['__tests__', 'Base', 'Icon']
+const IGNORE_DIRS = ['__tests__']
 
 describe('index', () => {
   it('should export all components in the components directory from index.ts', async () => {

diff --git a/src/index.ts b/src/index.ts
@@ -15,6 +15,7 @@ export { RadioLabel } from './components/RadioLabel'
 export { Button, ButtonAnchor, ButtonDiv } from './components/Button'
 export { Tag } from './components/Tag'
 export { Base } from './components/Base'
+export { Icon } from './components/Icon'
 
 // themes
 export { createTheme } from './themes/createTheme'

diff --git a/yarn.lock b/yarn.lock
@@ -10745,6 +10745,13 @@ react-hotkeys@2.0.0-pre4:
   dependencies:
     prop-types "^15.6.1"
 
+react-icons@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.7.0.tgz#64fe46231fabfeea27895edeae6c3b78114b8c8f"
+  integrity sha512-7MyPwjIhuyW0D2N3s4DEd0hGPGFf0sK+IIRKhc1FvSpZNVmnUoGvHbmAwzGJU+3my+fvihVWgwU5SDtlAri56Q==
+  dependencies:
+    camelcase "^5.0.0"
+
 react-inspector@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-3.0.2.tgz#c530a06101f562475537e47df428e1d7aff16ed8"