feat: introduce feather icons

package.json

@@ -178,6 +178,7 @@
     "react-docgen": "2.20.1",
     "react-docgen-typescript": "1.5.0",
     "react-dom": "16.3.1",
+    "react-feather": "1.1.0",
     "react-helmet": "5.2.0",
     "react-router": "4.2.0",
     "react-select": "2.0.0-beta.6",

src/components/add-page-button/index.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
 import { Color } from '../colors';
 import { Copy } from '../copy';
+import { IconSize } from '../icons';
+import * as React from 'react';
+import { Plus } from 'react-feather';
 import { getSpace, SpaceSize } from '../space';
-import { Icon, IconName, IconSize } from '../icons';
 import styled from 'styled-components';
 
 export interface AddPageButtonProps {
@@ -33,13 +34,13 @@ const StyledAddPageButton = styled.button`
 	}
 `;
 
-const StyledIcon = styled(Icon)`
+const StyledIcon = styled(Plus)`
 	margin-right: ${getSpace(SpaceSize.XS)}px;
 `;
 
 export const AddPageButton: React.SFC<AddPageButtonProps> = props => (
 	<StyledAddPageButton onClick={props.onClick}>
-		<StyledIcon name={IconName.Plus} size={IconSize.XS} color={Color.Grey60} />
+		<StyledIcon size={IconSize.XS} color={Color.Grey50} />
 		<Copy textColor={Color.Grey50}>Add Page</Copy>
 	</StyledAddPageButton>
 );

src/components/icons/index.tsx

@@ -3,18 +3,9 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 export enum IconName {
-	ArrowRight,
-	ArrowLeft,
 	ArrowFillRight,
 	ArrowFillLeft,
-	Check,
-	Element,
-	Page,
-	Plus,
-	Pattern,
-	Robo,
-	Search,
-	Uncheck
+	Robo
 }
 
 export interface IconProps {
@@ -43,82 +34,10 @@ interface IconRegistrySymbolProps {
 }
 
 const icons: { readonly [key: string]: JSX.Element[][] | JSX.Element[] } = {
-	[IconName.ArrowRight]: [
-		[
-			<path
-				key="arrowRight"
-				d="M17.5 12l-8.486 8.485L7.6 19.071 14.671 12 7.6 4.929l1.414-1.414z"
-			/>
-		]
-	],
-	[IconName.ArrowLeft]: [
-		[
-			<path
-				key="arrowLeft"
-				d="M7.5 12 15.986 3.515 17.4 4.929 10.329 12 17.4 19.071 15.986 20.485z"
-			/>
-		]
-	],
 	[IconName.ArrowFillRight]: [[<path key="arrowFillRight" d="M8 4l8 8-8 8z" />]],
 	[IconName.ArrowFillLeft]: [[<path key="arrowFillLeft" d="M16 20l-8-8 8-8v16z" />]],
 	[IconName.Robo]: [
 		[<path key="robo" d="M0 0h24v24H0V0zm15 5v5h5V5h-5zM4 20h16v-1H4v1zM4 5v5h5V5H4z" />]
-	],
-	[IconName.Plus]: [
-		[
-			<path
-				key="plus"
-				d="M11,11 L11,2 L13,2 L13,11 L22,11 L22,13 L13,13 L13,22 L11,22 L11,13 L2,13 L2,11 L11,11 Z"
-			/>
-		]
-	],
-	[IconName.Pattern]: [
-		[
-			<path
-				key="pattern"
-				d="M5 9h14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1zm4.16-2H19.5a.5.5 0 1 1 0 1H7.58a.26.26 0 0 1-.08-.5l1.35-.45A1 1 0 0 1 9.16 7z"
-			/>
-		]
-	],
-	[IconName.Uncheck]: [
-		[
-			<path
-				key="check"
-				d="M14.77 12l4.16 4.16a1.96 1.96 0 0 1-2.77 2.77L12 14.77l-4.16 4.16a1.96 1.96 0 0 1-2.77-2.77L9.23 12 5.07 7.84a1.96 1.96 0 1 1 2.77-2.77L12 9.23l4.16-4.16a1.96 1.96 0 0 1 2.77 2.77L14.77 12z"
-			/>
-		]
-	],
-	[IconName.Check]: [
-		[
-			<path
-				key="check"
-				d="M8.66 15.2l10.6-10.61A2 2 0 1 1 22.1 7.4L10.07 19.44a2 2 0 0 1-2.83 0L1.6 13.78a2 2 0 1 1 2.82-2.83l4.25 4.24z"
-			/>
-		]
-	],
-	[IconName.Search]: [
-		[
-			<path
-				key="check"
-				d="M14.89 13.477l6.024 6.023-1.414 1.414-6.023-6.023a6 6 0 1 1 1.414-1.414zm-1.649-1.132a4 4 0 1 0-.896.896l.896-.896z"
-			/>
-		]
-	],
-	[IconName.Page]: [
-		[
-			<path
-				key="page"
-				d="M6 6h10c.552 0 1 .418 1 .933v12.134c0 .515-.448.933-1 .933H6c-.552 0-1-.418-1-.933V6.933C5 6.418 5.448 6 6 6zm1.5 4a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1h-3zm0-2a.5.5 0 0 0 0 1h5a.5.5 0 1 0 0-1h-5zm0 4a.5.5 0 1 0 0 1h6a.5.5 0 1 0 0-1h-6zM19 4.5v13a.5.5 0 1 1-1 0V5H8.5a.5.5 0 0 1 0-1h10a.5.5 0 0 1 .5.5z"
-			/>
-		]
-	],
-	[IconName.Element]: [
-		[
-			<path
-				key="element"
-				d="M12.757 5.077l7.04 5.28a1 1 0 0 1 0 1.6l-7.04 5.28a1 1 0 0 1-1.2 0l-7.04-5.28a1 1 0 0 1 0-1.6l7.04-5.28a1 1 0 0 1 1.2 0zm7.127 8.63c.151.241.093.557-.133.729l-7.06 5.35a1 1 0 0 1-1.205.002l-7.29-5.494A.494.494 0 0 1 4.1 13.6l.003-.004a.506.506 0 0 1 .705-.095l6.677 5.035a1 1 0 0 0 1.207-.001l6.527-4.951a.459.459 0 0 1 .665.122z"
-			/>
-		]
 	]
 };
 

src/components/pattern-list/index.tsx

@@ -1,6 +1,7 @@
 import { Color } from '../colors';
-import { Icon, IconName, IconSize } from '../icons';
+import { IconSize } from '../icons';
 import * as React from 'react';
+import { Layout } from 'react-feather';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
@@ -51,9 +52,10 @@ const StyledPatternListItem = styled.div`
 		props.draggable ? 'cursor: move;' : props.onClick ? 'cursor: pointer;' : ''};
 `;
 
-const StyledIcon = styled(Icon)`
-	margin-right: ${getSpace(SpaceSize.XS)}px;
-	flex: 0 0 ${IconSize.S}px;
+const StyledIcon = styled(Layout)`
+	margin-top: ${getSpace(SpaceSize.XS)}px;
+	margin-right: ${getSpace(SpaceSize.XS + SpaceSize.XXS)}px;
+	flex: 0 0 ${IconSize.XS}px;
 `;
 
 const StyledPatternListItemContainer = styled.div`
@@ -101,12 +103,7 @@ export const PatternListItem: React.StatelessComponent<PatternListItemProps> = p
 			{icon ? (
 				<img {...{ [PatternAnchor.icon]: 'true' }} src={icon} />
 			) : (
-				<StyledIcon
-					dataIcon="true"
-					name={IconName.Pattern}
-					size={IconSize.S}
-					color={Color.Grey50}
-				/>
+				<StyledIcon size={IconSize.XS} color={Color.Grey50} />
 			)}
 			<StyledPatternListItemContainer>{props.children}</StyledPatternListItemContainer>
 		</StyledPatternListItem>

src/components/property-item-boolean/index.tsx

@@ -1,7 +1,8 @@
 import { Color } from '../colors';
-import { Icon, IconName, IconSize } from '../icons';
+import { IconSize } from '../icons';
 import { PropertyItem } from '../property-item';
 import * as React from 'react';
+import { Check, X } from 'react-feather';
 import styled from 'styled-components';
 
 export interface PropertyItemBooleanProps {
@@ -81,7 +82,11 @@ const StyledIndicatorTrack = styled.div`
 			: ''};
 `;
 
-const StyledIcon = styled(Icon)`
+const StyledCheckIcon = styled(Check)`
+	transform: translate(-0.5px, -0.5px); // fix to align icon properly
+`;
+
+const StyledXIcon = styled(X)`
 	transform: translate(-0.5px, -0.5px); // fix to align icon properly
 `;
 
@@ -90,15 +95,18 @@ const StyledInput = styled.input`
 `;
 
 export const PropertyItemBoolean: React.StatelessComponent<PropertyItemBooleanProps> = props => {
-	const icon = props.checked ? IconName.Check : IconName.Uncheck;
 	const color = props.checked ? Color.Blue40 : Color.Grey60;
 
 	return (
 		<PropertyItem description={props.description} label={props.label}>
 			<StyledInput onChange={props.onChange} checked={props.checked} type="checkbox" />
 			<StyledIndicatorTrack checked={props.checked || false}>
 				<StyledIndicatorKnob checked={props.checked || false}>
-					<StyledIcon name={icon} size={IconSize.XS} color={color} />
+					{props.checked ? (
+						<StyledCheckIcon size={IconSize.XS} color={color} />
+					) : (
+						<StyledXIcon size={IconSize.XS} color={color} />
+					)}
 				</StyledIndicatorKnob>
 			</StyledIndicatorTrack>
 		</PropertyItem>

src/components/search/index.tsx

@@ -1,6 +1,7 @@
 import { Color } from '../colors';
-import { Icon, IconName, IconSize } from '../icons';
+import { IconSize } from '../icons';
 import * as React from 'react';
+import * as Icon from 'react-feather';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
@@ -58,7 +59,7 @@ const StyledSearch = styled.input`
 	}
 `;
 
-const StyledIcon = styled(Icon)`
+const StyledIcon = styled(Icon.Search)`
 	position: absolute;
 	left: 0;
 	top: ${getSpace(SpaceSize.M) - 1}px; // fix to propertly align icon
@@ -67,7 +68,7 @@ const StyledIcon = styled(Icon)`
 
 export const Search: React.StatelessComponent<SearchProps> = props => (
 	<StyledContainer>
-		<StyledIcon name={IconName.Search} size={IconSize.XS} color={Color.Grey36} />
+		<StyledIcon size={IconSize.XS} color={Color.Grey50} />
 		<StyledSearch
 			autoFocus={props.focused}
 			className={props.className}

src/components/tab-switch/tab-switch.tsx

@@ -1,16 +1,12 @@
 import { Color } from '../colors';
-import { Copy } from '../copy';
-import { Icon, IconName, IconSize } from '../icons';
 import * as React from 'react';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
 export interface TabSwitchProps {
 	active?: TabSwitchState;
-	icon?: IconName;
-	label?: string;
 	onClick?: React.MouseEventHandler<HTMLElement>;
-	title: string;
+	children?: React.ReactNode;
 }
 
 export enum TabSwitchState {
@@ -33,14 +29,7 @@ const StyledTabSwitch = styled.div`
 `;
 
 export const TabSwitch: React.SFC<TabSwitchProps> = props => (
-	<StyledTabSwitch
-		active={props.active}
-		icon={props.icon}
-		label={props.label}
-		onClick={props.onClick}
-		title={props.title}
-	>
-		{props.icon && <Icon name={props.icon} size={IconSize.S} />}
-		{props.label && <Copy>{props.label}</Copy>}
+	<StyledTabSwitch active={props.active} onClick={props.onClick}>
+		{props.children}
 	</StyledTabSwitch>
 );

src/components/view-switch/index.tsx

@@ -1,7 +1,8 @@
 import { Color } from '../colors';
 import { CopySize } from '../copy';
-import { Icon, IconName, IconProps, IconSize } from '../icons';
+import { IconProps, IconSize } from '../icons';
 import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'react-feather';
 import { getSpace, SpaceSize } from '../space';
 import styled from 'styled-components';
 
@@ -55,14 +56,27 @@ const StyledTitle = styled.strong`
 	white-space: nowrap;
 `;
 
-const StyledIcons = styled(Icon)`
+const StyledLeftIcon = styled(ChevronLeft)`
+	padding: ${getSpace(SpaceSize.XXS)}px;
+	border-radius: ${getSpace(SpaceSize.XXS)}px;
+	visibility: ${(props: StyledIconProps) => (props.visible ? 'visible' : 'hidden')};
+	cursor: pointer;
+	pointer-events: auto;
+
+	&:hover {
+		background: ${Color.Grey90};
+	}
+	&:active {
+		background: ${Color.Grey80};
+	}
+`;
+
+const StyledRightIcon = styled(ChevronRight)`
 	padding: ${getSpace(SpaceSize.XXS)}px;
 	border-radius: ${getSpace(SpaceSize.XXS)}px;
 	visibility: ${(props: StyledIconProps) => (props.visible ? 'visible' : 'hidden')};
 	cursor: pointer;
 	pointer-events: auto;
-	transform: rotate(${(props: StyledIconProps) => (props.rotate ? '180deg' : '0')});
-	transition: transform 0.2s;
 
 	&:hover {
 		background: ${Color.Grey90};
@@ -74,19 +88,17 @@ const StyledIcons = styled(Icon)`
 
 export const ViewSwitch: React.SFC<ViewSwitchProps> = (props): JSX.Element => (
 	<StyledViewSwitch justify={props.justify} fontSize={props.fontSize}>
-		<StyledIcons
+		<StyledLeftIcon
 			color={Color.Grey60}
 			onClick={props.onLeftClick}
 			size={IconSize.XS}
-			name={IconName.ArrowLeft}
 			visible={props.leftVisible}
 		/>
 		<StyledTitle>{props.title}</StyledTitle>
-		<StyledIcons
+		<StyledRightIcon
 			color={Color.Grey60}
 			onClick={props.onRightClick}
 			size={IconSize.XS}
-			name={IconName.ArrowRight}
 			visible={props.rightVisible}
 		/>
 	</StyledViewSwitch>

src/container/chrome/chrome-switch.tsx

@@ -1,6 +1,7 @@
-import { IconName, TabSwitchState } from '../../components';
+import { IconSize, TabSwitchState } from '../../components';
 import * as MobxReact from 'mobx-react';
 import * as React from 'react';
+import { File, Layers, Sliders } from 'react-feather';
 import { TabSwitch } from '../../components';
 import { ViewStore } from '../../store';
 
@@ -13,17 +14,23 @@ export class ChromeSwitch extends React.Component {
 		return (
 			<div style={{ display: 'flex', height: '100%' }}>
 				<TabSwitch
-					icon={IconName.Page}
-					title={'Pages'}
 					active={store.getShowPages() ? TabSwitchState.Active : TabSwitchState.Default}
 					onClick={() => store.setShowPages(!store.getShowPages())}
-				/>
+				>
+					<File size={IconSize.XS} />
+				</TabSwitch>
 				<TabSwitch
-					icon={IconName.Element}
-					title={'Elements & Library'}
 					active={store.getShowLeftSidebar() ? TabSwitchState.Active : TabSwitchState.Default}
 					onClick={() => store.setShowLeftSidebar(!store.getShowLeftSidebar())}
-				/>
+				>
+					<Layers size={IconSize.XS} />
+				</TabSwitch>
+				<TabSwitch
+					active={store.getShowRightSidebar() ? TabSwitchState.Active : TabSwitchState.Default}
+					onClick={() => store.setShowRightSidebar(!store.getShowRightSidebar())}
+				>
+					<Sliders size={IconSize.XS} />
+				</TabSwitch>
 			</div>
 		);
 	}