chore: Refactor icon components

fix: Alignment of Outline logo component

app/scenes/Collection.tsx

@@ -17,8 +17,8 @@ import Search from "~/scenes/Search";
 import Badge from "~/components/Badge";
 import CenteredContent from "~/components/CenteredContent";
 import CollectionDescription from "~/components/CollectionDescription";
-import CollectionIcon from "~/components/CollectionIcon";
 import Heading from "~/components/Heading";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSearchPage from "~/components/InputSearchPage";
 import PlaceholderList from "~/components/List/Placeholder";
 import PaginatedDocumentList from "~/components/PaginatedDocumentList";

app/scenes/Document/components/ReferenceListItem.tsx

@@ -5,8 +5,8 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 import parseTitle from "@shared/utils/parseTitle";
 import Document from "~/models/Document";
-import EmojiIcon from "~/components/EmojiIcon";
 import Flex from "~/components/Flex";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
 import { hover } from "~/styles";
 import { NavigationNode } from "~/types";
 import { sharedDocumentPath } from "~/utils/routeHelpers";

app/scenes/Login/index.tsx

@@ -12,8 +12,8 @@ import ButtonLarge from "~/components/ButtonLarge";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
+import OutlineIcon from "~/components/Icons/OutlineIcon";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import OutlineLogo from "~/components/OutlineLogo";
 import PageTitle from "~/components/PageTitle";
 import TeamLogo from "~/components/TeamLogo";
 import Text from "~/components/Text";
@@ -197,7 +197,7 @@ function Login({ children }: Props) {
           {config.logo && !isCreate ? (
             <TeamLogo size={48} src={config.logo} />
           ) : (
-            <OutlineLogo size={42} fill="currentColor" />
+            <OutlineIcon size={48} />
           )}
         </Logo>
         {isCreate ? (

app/scenes/Settings/Import.tsx

@@ -7,8 +7,8 @@ import { cdnPath } from "@shared/utils/urls";
 import FileOperation from "~/models/FileOperation";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
+import OutlineIcon from "~/components/Icons/OutlineIcon";
 import Item from "~/components/List/Item";
-import OutlineLogo from "~/components/OutlineLogo";
 import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
@@ -35,7 +35,7 @@ function Import() {
       <div>
         <Item
           border={false}
-          image={<OutlineLogo size={28} fill="currentColor" />}
+          image={<OutlineIcon size={28} cover />}
           title="Outline"
           subtitle={t(
             "Import a backup file that was previously exported from Outline"

app/scenes/Settings/Slack.tsx

@@ -7,13 +7,13 @@ import { IntegrationType } from "@shared/types";
 import Collection from "~/models/Collection";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
-import CollectionIcon from "~/components/CollectionIcon";
 import Heading from "~/components/Heading";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
+import SlackIcon from "~/components/Icons/SlackIcon";
 import List from "~/components/List";
 import ListItem from "~/components/List/Item";
 import Notice from "~/components/Notice";
 import Scene from "~/components/Scene";
-import SlackIcon from "~/components/SlackIcon";
 import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentTeam from "~/hooks/useCurrentTeam";

app/scenes/Settings/Zapier.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import { Helmet } from "react-helmet";
 import { Trans } from "react-i18next";
 import Heading from "~/components/Heading";
+import ZapierIcon from "~/components/Icons/ZapierIcon";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
-import ZapierIcon from "~/components/ZapierIcon";
 import useStores from "~/hooks/useStores";
 
 function Zapier() {

app/scenes/Settings/components/SlackListItem.tsx

@@ -9,8 +9,8 @@ import Collection from "~/models/Collection";
 import Integration from "~/models/Integration";
 import Button from "~/components/Button";
 import ButtonLink from "~/components/ButtonLink";
-import CollectionIcon from "~/components/CollectionIcon";
 import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import ListItem from "~/components/List/Item";
 import Popover from "~/components/Popover";
 import Switch from "~/components/Switch";