Remove unused icons

frontend/components/DocumentPreview/DocumentPreview.js

@@ -2,10 +2,10 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
-import { Star as StarIcon } from 'react-feather';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
+import Icon from 'components/Icon';
 import PublishingInfo from './components/PublishingInfo';
 
 type Props = {
@@ -15,9 +15,10 @@ type Props = {
   innerRef?: Function,
 };
 
-const StyledStar = styled(StarIcon)`
-  top: 2px;
-  position: relative;
+const StyledStar = styled(Icon).attrs({
+  type: 'Star',
+  color: color.text,
+})`
   margin-left: 4px;
   opacity: ${props => (props.solid ? '1 !important' : 0)};
   transition: opacity 100ms ease-in-out;
@@ -41,7 +42,7 @@ const DocumentLink = styled(Link)`
     outline: none;
 
     ${StyledStar} {
-      opacity: .25;
+      opacity: .5;
 
       &:hover {
         opacity: 1;
@@ -83,10 +84,10 @@ const DocumentLink = styled(Link)`
           {document.title}
           {document.starred
             ? <a onClick={this.unstar}>
-                <StyledStar color={color.slateDark} size="1em" solid />
+                <StyledStar solid />
               </a>
             : <a onClick={this.star}>
-                <StyledStar color={color.slateDark} size="1em" />
+                <StyledStar />
               </a>}
         </h3>
         <PublishingInfo

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.js

@@ -1,16 +0,0 @@
-// @flow
-import React from 'react';
-
-import styles from './MoreIcon.scss';
-
-const MoreIcon = () => {
-  return (
-    <img
-      alt="More"
-      src={require('./assets/more.svg')}
-      className={styles.icon}
-    />
-  );
-};
-
-export default MoreIcon;

frontend/components/DropdownMenu/components/MoreIcon/MoreIcon.scss

@@ -1,4 +0,0 @@
-.icon {
-  width: 21px;
-  margin-top: 6px;
-}

frontend/components/DropdownMenu/components/MoreIcon/assets/more.svg

@@ -1 +0,0 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>

frontend/components/DropdownMenu/components/MoreIcon/index.js

@@ -1,3 +0,0 @@
-// @flow
-import MoreIcon from './MoreIcon';
-export default MoreIcon;

frontend/components/DropdownMenu/index.js

@@ -1,4 +1,2 @@
 // @flow
-import { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
-import MoreIcon from './components/MoreIcon';
-export { DropdownMenu, DropdownMenuItem, MoreIcon };
+export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';

frontend/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import type { State } from '../../../types';
 import keydown from 'react-keydown';
 import styles from '../Toolbar.scss';
-import CloseIcon from 'components/Icon/CloseIcon';
+import Icon from 'components/Icon';
 
 @keydown
 export default class LinkToolbar extends Component {
@@ -58,7 +58,7 @@ export default class LinkToolbar extends Component {
           autoFocus
         />
         <button className={styles.button} onMouseDown={this.removeLink}>
-          <CloseIcon light />
+          <Icon type="X" light />
         </button>
       </span>
     );

frontend/components/Icon/AddIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function AddIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/CheckIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function CheckIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/CloseIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function CloseIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/Icon.js

@@ -1,9 +1,11 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
+import * as Icons from 'react-feather';
 
 export type Props = {
   className?: string,
+  type?: string,
   light?: boolean,
 };
 
@@ -11,16 +13,40 @@ type BaseProps = {
   children?: React$Element<any>,
 };
 
-export default function Icon({ children, ...rest }: Props & BaseProps) {
+export default function Icon({
+  children,
+  light,
+  type,
+  ...rest
+}: Props & BaseProps) {
+  if (type) {
+    children = React.createElement(Icons[type], {
+      size: '1em',
+      color: light ? '#FFFFFF' : undefined,
+      ...rest,
+    });
+
+    return (
+      <FeatherWrapper {...rest}>
+        {children}
+      </FeatherWrapper>
+    );
+  }
+
   return (
-    <Wrapper {...rest}>
+    <Wrapper light={light} {...rest}>
       {children}
     </Wrapper>
   );
 }
 
+const FeatherWrapper = styled.span`
+  position: relative;
+  top: .1em;
+`;
+
 const Wrapper = styled.span`
   svg {
-    fill: ${props => (props.light ? '#fff' : '#000')};
+    fill: ${props => (props.light ? '#FFF' : '#000')}
   }
 `;

frontend/components/Icon/Icon.scss

@@ -1,9 +0,0 @@
-.icon {
-
-}
-
-.light {
-  svg {
-    fill: #fff;
-  }
-}

frontend/components/Icon/MoreIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function MoreIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/QuoteIcon.js

@@ -1,21 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function QuoteIcon(props: Props) {
-  return (
-    <Icon {...props}>
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    </Icon>
-  );
-}

frontend/components/Icon/StarIcon.js

@@ -1,43 +0,0 @@
-// @flow
-import React from 'react';
-import Icon from './Icon';
-import type { Props } from './Icon';
-
-export default function StarIcon(props: Props & { solid?: boolean }) {
-  let icon;
-
-  if (props.solid) {
-    icon = (
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    );
-  } else {
-    icon = (
-      <svg
-        fill="#000000"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z" />
-        <path d="M0 0h24v24H0z" fill="none" />
-      </svg>
-    );
-  }
-
-  return (
-    <Icon {...props}>
-      {icon}
-    </Icon>
-  );
-}

frontend/components/Layout/Layout.js

@@ -16,13 +16,7 @@ import Avatar from 'components/Avatar';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
 import Modal from 'components/Modal';
-import {
-  Home as HomeIcon,
-  Search as SearchIcon,
-  Star as StarIcon,
-  PlusCircle as AddIcon,
-  MoreHorizontal as MoreIcon,
-} from 'react-feather';
+import Icon from 'components/Icon';
 import CollectionNew from 'scenes/CollectionNew';
 import CollectionEdit from 'scenes/CollectionEdit';
 import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
@@ -162,22 +156,22 @@ type Props = {
                 <Scrollable>
                   <LinkSection>
                     <SidebarLink to="/dashboard">
-                      <HomeIcon size="1em" /> Home
+                      <Icon type="Home" /> Home
                     </SidebarLink>
                     <SidebarLink to="/search">
-                      <SearchIcon size="1em" /> Search
+                      <Icon type="Search" /> Search
                     </SidebarLink>
                     <SidebarLink to="/starred">
-                      <StarIcon size="1em" /> Starred
+                      <Icon type="Star" /> Starred
                     </SidebarLink>
                   </LinkSection>
                   <LinkSection>
                     {collections.active
                       ? <CollectionAction onClick={this.handleEditCollection}>
-                          <MoreIcon size={16} />
+                          <Icon type="MoreHorizontal" />
                         </CollectionAction>
                       : <CollectionAction onClick={this.handleCreateCollection}>
-                          <AddIcon size={16} />
+                          <Icon type="PlusCircle" />
                         </CollectionAction>}
                     {collections.active
                       ? <SidebarCollection
@@ -240,7 +234,7 @@ type Props = {
 
 const CollectionAction = styled.a`
   position: absolute;
-  top: -2px;
+  top: -4px;
   right: ${layout.hpadding};
   color: ${color.slate};
   svg { opacity: .75; }

frontend/components/Modal/Modal.js

@@ -2,9 +2,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
+import { color } from 'styles/constants';
 import { fadeAndScaleIn } from 'styles/animations';
-
-import CloseIcon from 'components/Icon/CloseIcon';
+import Icon from 'components/Icon';
 import Flex from 'components/Flex';
 
 type Props = {
@@ -32,7 +32,7 @@ const Modal = ({
     >
       <Content column>
         {title && <h1>{title}</h1>}
-        <Close onClick={onRequestClose}><CloseIcon /></Close>
+        <Close onClick={onRequestClose}><Icon type="X" size={32} /></Close>
         {children}
       </Content>
     </StyledModal>
@@ -68,6 +68,7 @@ const Close = styled.a`
   top: 3rem;
   right: 3rem;
   opacity: .5;
+  color: ${color.text};
 
   &:hover {
     opacity: 1;

frontend/scenes/Document/components/Menu.js

@@ -5,11 +5,8 @@ import get from 'lodash/get';
 import { withRouter } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import Document from 'models/Document';
-import {
-  DropdownMenu,
-  DropdownMenuItem,
-  MoreIcon,
-} from 'components/DropdownMenu';
+import Icon from 'components/Icon';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
 type Props = {
   history: Object,
@@ -65,7 +62,7 @@ type Props = {
         collection.documents.length > 1;
 
       return (
-        <DropdownMenu label={<MoreIcon />}>
+        <DropdownMenu label={<Icon type="MoreHorizontal" />}>
           {collection &&
             <div>
               <DropdownMenuItem onClick={this.onCreateDocument}>

frontend/scenes/Search/components/SearchField/SearchField.js

@@ -1,8 +1,9 @@
 // @flow
 import React, { Component } from 'react';
+import Icon from 'components/Icon';
 import Flex from 'components/Flex';
+import { color } from 'styles/constants';
 import styled from 'styled-components';
-import searchImg from 'assets/icons/search.svg';
 
 const Field = styled.input`
   width: 100%;
@@ -12,17 +13,10 @@ const Field = styled.input`
   outline: none;
   border: 0;
 
-  ::-webkit-input-placeholder { color: #ccc; }
-  :-moz-placeholder { color: #ccc; }
-  ::-moz-placeholder { color: #ccc; }
-  :-ms-input-placeholder { color: #ccc; }
-`;
-
-const Icon = styled.img`
-  width: 38px;
-  margin-bottom: -5px;
-  margin-right: 10px;
-  opacity: 0.15;
+  ::-webkit-input-placeholder { color: ${color.slate}; }
+  :-moz-placeholder { color: ${color.slate}; }
+  ::-moz-placeholder { color: ${color.slate}; }
+  :-ms-input-placeholder { color: ${color.slate}; }
 `;
 
 class SearchField extends Component {
@@ -45,13 +39,18 @@ class SearchField extends Component {
 
   render() {
     return (
-      <Flex>
-        <Icon src={searchImg} alt="Search" onClick={this.focusInput} />
+      <Flex align="center">
+        <Icon
+          type="Search"
+          size={48}
+          color="#C9CFD6"
+          onClick={this.focusInput}
+        />
         <Field
           {...this.props}
           innerRef={this.setRef}
           onChange={this.handleChange}
-          placeholder="Search"
+          placeholder="Search…"
           autoFocus
         />
       </Flex>