Feature/icons

__tests__/Icon.test.tsx

@@ -0,0 +1,25 @@
+import { render } from 'enzyme';
+import { Icon } from '@/components';
+import React from 'react';
+
+describe('Icon test', () => {
+    it('should render icon', () => {
+        const container = render(
+            <div>
+                <Icon icon="home"/>
+            </div>
+        );
+
+        expect(container.find('.cui-icon.cui-icon-home').length).toBe(1);
+    });
+
+    it('should render icon with specific size', () => {
+        const container = render(
+            <div>
+                <Icon icon="home" size={12} />
+            </div>
+        );
+
+        expect(container.find('.cui-icon.cui-icon-home.cui-icon-size-12').length).toBe(1);
+    });
+});

package.json

@@ -40,10 +40,6 @@
         "webpack-dev-server": "^3.11.0"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-free": "^5.15.1",
-        "@fortawesome/fontawesome-svg-core": "^1.2.32",
-        "@fortawesome/free-regular-svg-icons": "^5.15.1",
-        "@fortawesome/react-fontawesome": "^0.1.11",
         "clsx": "^1.1.1",
         "react": "^17.0.1"
     }

src/components/Button/Button.tsx

@@ -45,7 +45,7 @@ const Button = React.forwardRef<HTMLElement, ButtonProps>((
                     {iconLeft}
                 </div>
             )}
-            <span>{children}</span>
+            <span className="btn-text">{children}</span>
             {iconRight && (
                 <div className="icon-container icon-right">
                     {iconRight}

src/components/Icon/Icon.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { IconName } from '@/components/Icon/IconName';
+
+interface IconProps extends React.HTMLAttributes<HTMLElement> {
+    icon: IconName | string;
+    size?: string | number;
+}
+
+const Icon = React.forwardRef<HTMLElement, IconProps>((
+    {
+        className,
+        icon,
+        size
+    },
+    ref
+): React.ReactElement => (
+    <i
+        ref={ref}
+        className={clsx(
+            'cui-icon',
+            `cui-icon-${icon}`,
+            size && `cui-icon-size-${size}`,
+            className
+        )}
+    />
+));
+
+Icon.displayName = 'Icon';
+Icon.propTypes = {
+    className: PropTypes.string,
+    icon: PropTypes.string.isRequired,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+}
+
+export default Icon;

src/components/Icon/IconName.ts

@@ -0,0 +1,245 @@
+export type IconName =
+    | 'activity'
+    | 'alert-circle'
+    | 'alert-triangle'
+    | 'archive'
+    | 'arrow-left'
+    | 'arrow-circle-down'
+    | 'arrow-circle-left'
+    | 'arrow-circle-right'
+    | 'arrow-circle-up'
+    | 'sort-down'
+    | 'arrow-down'
+    | 'arrow-right'
+    | 'arrow-alt-left'
+    | 'arrow-alt-down'
+    | 'arrow-alt-right'
+    | 'arrow-alt-up'
+    | 'sort-left'
+    | 'sort-right'
+    | 'sort-up'
+    | 'arrow-up'
+    | 'chevron-double-down'
+    | 'chevron-double-left'
+    | 'chevron-double-right'
+    | 'chevron-double-up'
+    | 'at'
+    | 'attach-2'
+    | 'attach'
+    | 'award'
+    | 'backspace'
+    | 'bar-chart-2'
+    | 'bar-chart'
+    | 'battery'
+    | 'behance'
+    | 'bell-off'
+    | 'bell'
+    | 'bluetooth'
+    | 'book-open'
+    | 'book'
+    | 'bookmark'
+    | 'briefcase'
+    | 'browser'
+    | 'brush'
+    | 'bulb'
+    | 'calendar'
+    | 'camera'
+    | 'car'
+    | 'cast'
+    | 'charging'
+    | 'checkmark-circle-2'
+    | 'checkmark-circle'
+    | 'checkmark'
+    | 'checkmark-square-2'
+    | 'checkmark-square'
+    | 'chevron-down'
+    | 'chevron-left'
+    | 'chevron-right'
+    | 'chevron-up'
+    | 'clipboard'
+    | 'clock'
+    | 'close-circle'
+    | 'close'
+    | 'close-square'
+    | 'cloud-download'
+    | 'cloud-upload'
+    | 'code-download'
+    | 'code'
+    | 'collapse'
+    | 'color-palette'
+    | 'color-picker'
+    | 'compass'
+    | 'copy'
+    | 'corner-down-left'
+    | 'corner-down-right'
+    | 'corner-left-down'
+    | 'corner-left-up'
+    | 'corner-right-down'
+    | 'corner-right-up'
+    | 'corner-up-left'
+    | 'corner-up-right'
+    | 'credit-card'
+    | 'crop'
+    | 'cube'
+    | 'diagonal-arrow-left-down'
+    | 'diagonal-arrow-left-up'
+    | 'diagonal-arrow-right-down'
+    | 'diagonal-arrow-right-up'
+    | 'done-all'
+    | 'download'
+    | 'droplet-off'
+    | 'droplet'
+    | 'edit-2'
+    | 'edit'
+    | 'email'
+    | 'expand'
+    | 'external-link'
+    | 'eye-off-2'
+    | 'eye-off'
+    | 'eye'
+    | 'facebook'
+    | 'file-add'
+    | 'file'
+    | 'file-remove'
+    | 'file-text'
+    | 'film'
+    | 'flag'
+    | 'flash-off'
+    | 'flash'
+    | 'flip-2'
+    | 'flip'
+    | 'folder-add'
+    | 'folder'
+    | 'folder-remove'
+    | 'funnel'
+    | 'gift'
+    | 'github'
+    | 'globe-2'
+    | 'globe'
+    | 'google'
+    | 'grid'
+    | 'hard-drive'
+    | 'hash'
+    | 'headphones'
+    | 'heart'
+    | 'home'
+    | 'image'
+    | 'inbox'
+    | 'info'
+    | 'keypad'
+    | 'layers'
+    | 'layout'
+    | 'link-2'
+    | 'link'
+    | 'linkedin'
+    | 'list'
+    | 'loader'
+    | 'lock'
+    | 'log-in'
+    | 'log-out'
+    | 'map'
+    | 'maximize'
+    | 'menu-2'
+    | 'menu-arrow'
+    | 'menu'
+    | 'message-circle'
+    | 'message-square'
+    | 'mic-off'
+    | 'mic'
+    | 'minimize'
+    | 'minus-circle'
+    | 'minus'
+    | 'minus-square'
+    | 'monitor'
+    | 'moon'
+    | 'more-horizontal'
+    | 'more-vertical'
+    | 'move'
+    | 'music'
+    | 'navigation-2'
+    | 'navigation'
+    | 'npm'
+    | 'options-2'
+    | 'options'
+    | 'pantone'
+    | 'paper-plane'
+    | 'pause-circle'
+    | 'people'
+    | 'percent'
+    | 'user-add'
+    | 'user-delete'
+    | 'user-done'
+    | 'user'
+    | 'user-remove'
+    | 'phone-call'
+    | 'phone-missed'
+    | 'phone-off'
+    | 'phone'
+    | 'pie-chart'
+    | 'pin'
+    | 'play-circle'
+    | 'plus-circle'
+    | 'plus'
+    | 'plus-square'
+    | 'power'
+    | 'pricetags'
+    | 'printer'
+    | 'question-mark-circle'
+    | 'question-mark'
+    | 'radio-button-off'
+    | 'radio-button-on'
+    | 'radio'
+    | 'recording'
+    | 'refresh'
+    | 'repeat'
+    | 'rewind-left'
+    | 'rewind-right'
+    | 'save'
+    | 'scissors'
+    | 'search'
+    | 'settings-2'
+    | 'settings'
+    | 'shake'
+    | 'share'
+    | 'shield-off'
+    | 'shield'
+    | 'shopping-bag'
+    | 'shopping-cart'
+    | 'shuffle-2'
+    | 'shuffle'
+    | 'step-backward'
+    | 'step-forward'
+    | 'slash'
+    | 'smartphone'
+    | 'smiling-face'
+    | 'speaker'
+    | 'square'
+    | 'star'
+    | 'stop-circle'
+    | 'sun'
+    | 'swap'
+    | 'sync'
+    | 'text'
+    | 'thermometer-minus'
+    | 'thermometer'
+    | 'thermometer-plus'
+    | 'toggle-left'
+    | 'toggle-right'
+    | 'trash-2'
+    | 'trash'
+    | 'trending-down'
+    | 'trending-up'
+    | 'tv'
+    | 'twitter'
+    | 'umbrella'
+    | 'undo'
+    | 'unlock'
+    | 'upload'
+    | 'video-off'
+    | 'video'
+    | 'volume-down'
+    | 'volume-mute'
+    | 'volume-off'
+    | 'volume-up'
+    | 'wifi-off'
+    | 'wifi';

src/components/Icon/index.ts

@@ -0,0 +1 @@
+export { default as Icon } from './Icon';

src/components/index.ts

@@ -1,6 +1,8 @@
+export * from './Button';
 export * from './Card';
 export * from './Container';
 export * from './Grid';
 export * from './Page';
 export * from './Panel';
+export * from './Icon';
 export * from './utils';