feat: Collection Icons (#1281)

* wip: Working for creation, and display

* feat: IconPicker

* fix

* feat: Invert collection icon color when dark in dark mode

* Improve readability of dropdown menus in dark mode
Suggest icon based on collection name

* Add additional icons
Tweaks and final polish

* fix: Write default icon as empty icon column

* feat: Improve icon selection logic
add more keywords
Improve icon coloring when selected and in dark mode

* lint

* lint

app/components/PathToDocument.js

@@ -2,12 +2,13 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import styled from 'styled-components';
-import { GoToIcon, CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
+import { GoToIcon } from 'outline-icons';
 import Flex from 'shared/components/Flex';
 
 import Document from 'models/Document';
 import Collection from 'models/Collection';
 import type { DocumentPath } from 'stores/CollectionsStore';
+import CollectionIcon from 'components/CollectionIcon';
 
 type Props = {
   result: DocumentPath,
@@ -41,12 +42,7 @@ class PathToDocument extends React.Component<Props> {
 
     return (
       <Component ref={ref} onClick={this.handleClick} href="" selectable>
-        {collection &&
-          (collection.private ? (
-            <PrivateCollectionIcon color={collection.color} />
-          ) : (
-            <CollectionIcon color={collection.color} />
-          ))}
+        {collection && <CollectionIcon collection={collection} />}
         {result.path
           .map(doc => <Title key={doc.id}>{doc.title}</Title>)
           .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}