chore: Bump outline-icons (#5170

* Bump outline-icons to default use currentColor * wip
2023-04-08 11:16:05 -04:00
parent 489cfcd0b0
commit aab3a49f2c
70 changed files with 113 additions and 190 deletions
--- a/app/actions/index.ts
+++ b/app/actions/index.ts
@@ -49,9 +49,7 @@ export function actionToMenuItem(
  const title = resolve<string>(action.name, context);
  const icon =
    resolvedIcon && action.iconInContextMenu !== false
-      ? React.cloneElement(resolvedIcon, {
-          color: "currentColor",
-        })
+      ? resolvedIcon
      : undefined;

  if (resolvedChildren) {
--- a/app/components/Arrow.tsx
+++ b/app/components/Arrow.tsx
@@ -6,17 +6,11 @@ export default function Arrow() {
      width="13"
      height="30"
      viewBox="0 0 13 30"
-      fill="none"
+      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <path
-        fill="currentColor"
-        d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
-      />
-      <path
-        fill="currentColor"
-        d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
-      />
+      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
+      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
    </svg>
  );
 }
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -14,7 +14,6 @@ type RealProps = {
  $borderOnHover?: boolean;
  $neutral?: boolean;
  $danger?: boolean;
-  $iconColor?: string;
 };

 const RealButton = styled(ActionButton)<RealProps>`
@@ -37,14 +36,6 @@ const RealButton = styled(ActionButton)<RealProps>`
  appearance: none !important;
  ${undraggableOnDesktop()}

-  ${(props) =>
-    !props.$borderOnHover &&
-    `
-      svg {
-        fill: ${props.$iconColor || "currentColor"};
-      }
-    `}
-
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
@@ -77,15 +68,6 @@ const RealButton = styled(ActionButton)<RealProps>`
        : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
    };

-    ${
-      props.$borderOnHover
-        ? ""
-        : `svg {
-      fill: ${props.$iconColor || "currentColor"};
-    }`
-    }
-
-
    &:hover:not(:disabled),
    &[aria-expanded="true"] {
      background: ${
@@ -156,7 +138,6 @@ export const Inner = styled.span<{

 export type Props<T> = ActionButtonProps & {
  icon?: React.ReactNode;
-  iconColor?: string;
  children?: React.ReactNode;
  disclosure?: boolean;
  neutral?: boolean;
@@ -184,7 +165,6 @@ const Button = <T extends React.ElementType = "button">(
    neutral,
    action,
    icon,
-    iconColor,
    borderOnHover,
    hideIcon,
    fullwidth,
@@ -204,13 +184,12 @@ const Button = <T extends React.ElementType = "button">(
      $danger={danger}
      $fullwidth={fullwidth}
      $borderOnHover={borderOnHover}
-      $iconColor={iconColor}
      {...rest}
    >
      <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
        {hasIcon && ic}
        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon color="currentColor" />}
+        {disclosure && <ExpandedIcon />}
      </Inner>
    </RealButton>
  );
--- a/app/components/CommandBarItem.tsx
+++ b/app/components/CommandBarItem.tsx
@@ -39,10 +39,9 @@ function CommandBarItem(
            // @ts-expect-error no icon on ActionImpl
            React.cloneElement(action.icon, {
              size: 22,
-              color: "currentColor",
            })
          ) : (
-            <ArrowIcon color="currentColor" />
+            <ArrowIcon />
          )}
        </Icon>

--- a/app/components/ContextMenu/MenuItem.tsx
+++ b/app/components/ContextMenu/MenuItem.tsx
@@ -78,15 +78,11 @@ const MenuItem = (
        >
          {selected !== undefined && (
            <>
-              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
+              {selected ? <CheckmarkIcon /> : <Spacer />}
              &nbsp;
            </>
          )}
-          {icon && (
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
          {children}
        </MenuAnchor>
      )}
--- a/app/components/ContextMenu/OverflowMenuButton.tsx
+++ b/app/components/ContextMenu/OverflowMenuButton.tsx
@@ -5,19 +5,14 @@ import NudeButton from "~/components/NudeButton";

 type Props = React.ComponentProps<typeof MenuButton> & {
  className?: string;
-  iconColor?: string;
 };

-export default function OverflowMenuButton({
-  iconColor,
-  className,
-  ...rest
-}: Props) {
+export default function OverflowMenuButton({ className, ...rest }: Props) {
  return (
    <MenuButton {...rest}>
      {(props) => (
        <NudeButton className={className} {...props}>
-          <MoreIcon color={iconColor} />
+          <MoreIcon />
        </NudeButton>
      )}
    </MenuButton>
--- a/app/components/DefaultCollectionInputSelect.tsx
+++ b/app/components/DefaultCollectionInputSelect.tsx
@@ -73,7 +73,7 @@ const DefaultCollectionInputSelect = ({
            label: (
              <Flex align="center">
                <IconWrapper>
-                  <HomeIcon color="currentColor" />
+                  <HomeIcon />
                </IconWrapper>
                {t("Home")}
              </Flex>
--- a/app/components/DocumentBreadcrumb.tsx
+++ b/app/components/DocumentBreadcrumb.tsx
@@ -22,7 +22,7 @@ function useCategory(document: Document): MenuInternalLink | null {
  if (document.isDeleted) {
    return {
      type: "route",
-      icon: <TrashIcon color="currentColor" />,
+      icon: <TrashIcon />,
      title: t("Trash"),
      to: "/trash",
    };
@@ -31,7 +31,7 @@ function useCategory(document: Document): MenuInternalLink | null {
  if (document.isArchived) {
    return {
      type: "route",
-      icon: <ArchiveIcon color="currentColor" />,
+      icon: <ArchiveIcon />,
      title: t("Archive"),
      to: "/archive",
    };
@@ -40,7 +40,7 @@ function useCategory(document: Document): MenuInternalLink | null {
  if (document.isTemplate) {
    return {
      type: "route",
-      icon: <ShapesIcon color="currentColor" />,
+      icon: <ShapesIcon />,
      title: t("Templates"),
      to: "/templates",
    };
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -128,7 +128,7 @@ function DocumentCard(props: Props) {
                  : document.titleWithDefault}
              </Heading>
              <DocumentMeta size="xsmall">
-                <Clock color="currentColor" size={18} />
+                <Clock size={18} />
                <Time
                  dateTime={document.updatedAt}
                  tooltipDelay={500}
@@ -143,7 +143,7 @@ function DocumentCard(props: Props) {
              {!isDragging && pin && (
                <Tooltip tooltip={t("Unpin")}>
                  <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                    <CloseIcon color="currentColor" />
+                    <CloseIcon />
                  </PinButton>
                </Tooltip>
              )}
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -178,6 +178,7 @@ const Actions = styled(EventBoundary)`
  margin: 8px;
  flex-shrink: 0;
  flex-grow: 0;
+  color: ${s("textSecondary")};

  ${NudeButton} {
    &:hover,
--- a/app/components/EventListItem.tsx
+++ b/app/components/EventListItem.tsx
@@ -58,7 +58,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {

  switch (event.name) {
    case "revisions.create":
-      icon = <EditIcon color="currentColor" size={16} />;
+      icon = <EditIcon size={16} />;
      meta = t("{{userName}} edited", opts);
      to = {
        pathname: documentHistoryUrl(document, event.modelId || ""),
@@ -67,7 +67,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.live_editing":
-      icon = <LightningIcon color="currentColor" size={16} />;
+      icon = <LightningIcon size={16} />;
      meta = t("Latest");
      to = {
        pathname: documentHistoryUrl(document),
@@ -76,7 +76,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.archive":
-      icon = <ArchiveIcon color="currentColor" size={16} />;
+      icon = <ArchiveIcon size={16} />;
      meta = t("{{userName}} archived", opts);
      break;

@@ -85,7 +85,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.delete":
-      icon = <TrashIcon color="currentColor" size={16} />;
+      icon = <TrashIcon size={16} />;
      meta = t("{{userName}} deleted", opts);
      break;

@@ -94,17 +94,17 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      break;

    case "documents.publish":
-      icon = <PublishIcon color="currentColor" size={16} />;
+      icon = <PublishIcon size={16} />;
      meta = t("{{userName}} published", opts);
      break;

    case "documents.unpublish":
-      icon = <UnpublishIcon color="currentColor" size={16} />;
+      icon = <UnpublishIcon size={16} />;
      meta = t("{{userName}} unpublished", opts);
      break;

    case "documents.move":
-      icon = <MoveIcon color="currentColor" size={16} />;
+      icon = <MoveIcon size={16} />;
      meta = t("{{userName}} moved", opts);
      break;

--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -63,7 +63,6 @@ function Header({ left, title, actions, hasSidebar }: Props) {
            <MobileMenuButton
              onClick={ui.toggleMobileSidebar}
              icon={<MenuIcon />}
-              iconColor="currentColor"
              neutral
            />
          )}
--- a/app/components/List/Error.tsx
+++ b/app/components/List/Error.tsx
@@ -21,11 +21,11 @@ export default function LoadingError({ error, retry, ...rest }: Props) {
  const message =
    error instanceof OfflineError ? (
      <>
-        <DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
+        <DisconnectedIcon /> {t("You’re offline.")}
      </>
    ) : (
      <>
-        <WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
+        <WarningIcon /> {t("Sorry, an error occurred.")}
      </>
    );

--- a/app/components/Modal.tsx
+++ b/app/components/Modal.tsx
@@ -94,7 +94,7 @@ const Modal: React.FC<Props> = ({
                      )}
                      <Text as="span" size="large">
                        <NudeButton onClick={onRequestClose}>
-                          <CloseIcon color="currentColor" />
+                          <CloseIcon />
                        </NudeButton>
                      </Text>
                    </Header>
@@ -119,10 +119,10 @@ const Modal: React.FC<Props> = ({
                    </Centered>
                  </Content>
                  <Close onClick={onRequestClose}>
-                    <CloseIcon size={32} color="currentColor" />
+                    <CloseIcon size={32} />
                  </Close>
                  <Back onClick={onRequestClose}>
-                    <BackIcon size={32} color="currentColor" />
+                    <BackIcon size={32} />
                    <Text as="span">{t("Back")} </Text>
                  </Back>
                </Fullscreen>
--- a/app/components/Sidebar/App.tsx
+++ b/app/components/Sidebar/App.tsx
@@ -88,20 +88,20 @@ function AppSidebar() {
            <Section>
              <SidebarLink
                to={homePath()}
-                icon={<HomeIcon color="currentColor" />}
+                icon={<HomeIcon />}
                exact={false}
                label={t("Home")}
              />
              <SidebarLink
                to={searchPath()}
-                icon={<SearchIcon color="currentColor" />}
+                icon={<SearchIcon />}
                label={t("Search")}
                exact={false}
              />
              {can.createDocument && (
                <SidebarLink
                  to={draftsPath()}
-                  icon={<EditIcon color="currentColor" />}
+                  icon={<EditIcon />}
                  label={
                    <Flex align="center" justify="space-between">
                      {t("Drafts")}
@@ -124,7 +124,7 @@ function AppSidebar() {
                <>
                  <SidebarLink
                    to={templatesPath()}
-                    icon={<ShapesIcon color="currentColor" />}
+                    icon={<ShapesIcon />}
                    exact={false}
                    label={t("Templates")}
                    active={
--- a/app/components/Sidebar/Settings.tsx
+++ b/app/components/Sidebar/Settings.tsx
@@ -33,7 +33,7 @@ function SettingsSidebar() {
      <HistoryNavigation />
      <HeaderButton
        title={t("Return to App")}
-        image={<StyledBackIcon color="currentColor" />}
+        image={<StyledBackIcon />}
        onClick={returnToApp}
        minHeight={Desktop.hasInsetTitlebar() ? undefined : 48}
      />
@@ -47,7 +47,7 @@ function SettingsSidebar() {
                  <SidebarLink
                    key={item.path}
                    to={item.path}
-                    icon={<item.icon color="currentColor" />}
+                    icon={<item.icon />}
                    label={item.name}
                  />
                ))}
--- a/app/components/Sidebar/components/ArchiveLink.tsx
+++ b/app/components/Sidebar/components/ArchiveLink.tsx
@@ -32,7 +32,7 @@ function ArchiveLink() {
    <div ref={dropToArchiveDocument}>
      <SidebarLink
        to={archivePath()}
-        icon={<ArchiveIcon color="currentColor" open={isDocumentDropping} />}
+        icon={<ArchiveIcon open={isDocumentDropping} />}
        exact={false}
        label={t("Archive")}
        active={documents.active?.isArchived && !documents.active?.isDeleted}
--- a/app/components/Sidebar/components/Disclosure.tsx
+++ b/app/components/Sidebar/components/Disclosure.tsx
@@ -22,7 +22,7 @@ function Disclosure({ onClick, root, expanded, ...rest }: Props) {
      aria-label={expanded ? t("Collapse") : t("Expand")}
      {...rest}
    >
-      <StyledCollapsedIcon expanded={expanded} size={20} color="currentColor" />
+      <StyledCollapsedIcon expanded={expanded} size={20} />
    </Button>
  );
 }
--- a/app/components/Sidebar/components/Header.tsx
+++ b/app/components/Sidebar/components/Header.tsx
@@ -36,9 +36,7 @@ export const Header: React.FC<Props> = ({ id, title, children }) => {
      <H3>
        <Button onClick={handleClick} disabled={!id}>
          {title}
-          {id && (
-            <Disclosure expanded={expanded} color="currentColor" size={20} />
-          )}
+          {id && <Disclosure expanded={expanded} size={20} />}
        </Button>
      </H3>
      {expanded && (firstRender ? children : <Fade>{children}</Fade>)}
--- a/app/components/Sidebar/components/HeaderButton.tsx
+++ b/app/components/Sidebar/components/HeaderButton.tsx
@@ -40,8 +40,8 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
        {image}
        {title}
      </Title>
-      {showDisclosure && <ExpandedIcon color="currentColor" />}
-      {showMoreMenu && <MoreIcon color="currentColor" />}
+      {showDisclosure && <ExpandedIcon />}
+      {showMoreMenu && <MoreIcon />}
    </Wrapper>
  )
 );
--- a/app/components/Sidebar/components/HistoryNavigation.tsx
+++ b/app/components/Sidebar/components/HistoryNavigation.tsx
@@ -45,12 +45,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {
    <Navigation gap={4} {...props}>
      <Tooltip tooltip={t("Go back")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge.goBack()}>
-          <Back color="currentColor" $active={back} />
+          <Back $active={back} />
        </NudeButton>
      </Tooltip>
      <Tooltip tooltip={t("Go forward")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge.goForward()}>
-          <Forward color="currentColor" $active={forward} />
+          <Forward $active={forward} />
        </NudeButton>
      </Tooltip>
    </Navigation>
--- a/app/components/Sidebar/components/TrashLink.tsx
+++ b/app/components/Sidebar/components/TrashLink.tsx
@@ -36,7 +36,7 @@ function TrashLink() {
      <div ref={dropToTrashDocument}>
        <SidebarLink
          to={trashPath()}
-          icon={<TrashIcon color="currentColor" open={isDocumentDropping} />}
+          icon={<TrashIcon open={isDocumentDropping} />}
          exact={false}
          label={t("Trash")}
          active={documents.active?.isDeleted}
--- a/app/components/Toast.tsx
+++ b/app/components/Toast.tsx
@@ -58,12 +58,10 @@ function Toast({ closeAfterMs = 3000, onRequestClose, toast }: Props) {
      onMouseLeave={handleResume}
    >
      <Container onClick={action ? undefined : onRequestClose}>
-        {type === "loading" && <Spinner color="currentColor" />}
-        {type === "info" && <InfoIcon color="currentColor" />}
-        {type === "success" && <CheckboxIcon checked color="currentColor" />}
-        {(type === "warning" || type === "error") && (
-          <WarningIcon color="currentColor" />
-        )}
+        {type === "loading" && <Spinner />}
+        {type === "info" && <InfoIcon />}
+        {type === "success" && <CheckboxIcon checked />}
+        {(type === "warning" || type === "error") && <WarningIcon />}
        <Message>{toast.message}</Message>
        {action && <Action onClick={action.onClick}>{action.text}</Action>}
      </Container>
--- a/app/editor/components/LinkEditor.tsx
+++ b/app/editor/components/LinkEditor.tsx
@@ -335,16 +335,12 @@ class LinkEditor extends React.Component<Props, State> {
          tooltip={isInternal ? dictionary.goToLink : dictionary.openLink}
        >
          <ToolbarButton onClick={this.handleOpenLink} disabled={!value}>
-            {isInternal ? (
-              <ArrowIcon color="currentColor" />
-            ) : (
-              <OpenIcon color="currentColor" />
-            )}
+            {isInternal ? <ArrowIcon /> : <OpenIcon />}
          </ToolbarButton>
        </Tooltip>
        <Tooltip tooltip={dictionary.removeLink}>
          <ToolbarButton onClick={this.handleRemoveLink}>
-            <CloseIcon color="currentColor" />
+            <CloseIcon />
          </ToolbarButton>
        </Tooltip>

@@ -361,7 +357,7 @@ class LinkEditor extends React.Component<Props, State> {
                    key={result.url}
                    title={result.title}
                    subtitle={result.subtitle}
-                    icon={<DocumentIcon color="currentColor" />}
+                    icon={<DocumentIcon />}
                    onPointerMove={() => this.handleFocusLink(index)}
                    onClick={this.handleSelectLink(result.url, result.title)}
                    selected={index === selectedIndex}
@@ -375,7 +371,7 @@ class LinkEditor extends React.Component<Props, State> {
                    containerRef={this.resultsRef}
                    title={suggestedLinkTitle}
                    subtitle={dictionary.createNewDoc}
-                    icon={<PlusIcon color="currentColor" />}
+                    icon={<PlusIcon />}
                    onPointerMove={() => this.handleFocusLink(results.length)}
                    onClick={() => {
                      this.handleCreateLink(suggestedLinkTitle);
--- a/app/editor/components/ToolbarMenu.tsx
+++ b/app/editor/components/ToolbarMenu.tsx
@@ -47,7 +47,7 @@ function ToolbarMenu(props: Props) {
        return (
          <Tooltip tooltip={item.tooltip} key={index}>
            <ToolbarButton onClick={handleClick(item)} active={isActive}>
-              {React.cloneElement(item.icon, { color: "currentColor" })}
+              {item.icon}
            </ToolbarButton>
          </Tooltip>
        );
--- a/app/hooks/useSettingsActions.tsx
+++ b/app/hooks/useSettingsActions.tsx
@@ -14,7 +14,7 @@ const useSettingsActions = () => {
        return {
          id: item.path,
          name: item.name,
-          icon: <Icon color="currentColor" />,
+          icon: <Icon />,
          section: NavigationSection,
          perform: () => history.push(item.path),
        };
--- a/app/menus/CollectionMenu.tsx
+++ b/app/menus/CollectionMenu.tsx
@@ -220,11 +220,7 @@ function CollectionMenu({
        type: "submenu",
        title: t("Sort in sidebar"),
        visible: can.update,
-        icon: alphabeticalSort ? (
-          <AlphabeticalSortIcon color="currentColor" />
-        ) : (
-          <ManualSortIcon color="currentColor" />
-        ),
+        icon: alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />,
        items: [
          {
            type: "button",
--- a/app/menus/RevisionMenu.tsx
+++ b/app/menus/RevisionMenu.tsx
@@ -33,7 +33,6 @@ function RevisionMenu({ document, className }: Props) {
    <>
      <OverflowMenuButton
        className={className}
-        iconColor="currentColor"
        aria-label={t("Show menu")}
        {...menu}
      />
--- a/app/menus/TableOfContentsMenu.tsx
+++ b/app/menus/TableOfContentsMenu.tsx
@@ -65,7 +65,6 @@ function TableOfContentsMenu({ headings }: Props) {
          <Button
            {...props}
            icon={<TableOfContentsIcon />}
-            iconColor="currentColor"
            borderOnHover
            neutral
          />
--- a/app/scenes/Archive.tsx
+++ b/app/scenes/Archive.tsx
@@ -13,7 +13,7 @@ function Archive() {
  const { t } = useTranslation();
  const { documents } = useStores();
  return (
-    <Scene icon={<ArchiveIcon color="currentColor" />} title={t("Archive")}>
+    <Scene icon={<ArchiveIcon />} title={t("Archive")}>
      <Heading>{t("Archive")}</Heading>
      <PaginatedDocumentList
        documents={documents.archived}
--- a/app/scenes/Collection/Empty.tsx
+++ b/app/scenes/Collection/Empty.tsx
@@ -42,7 +42,7 @@ function EmptyCollection({ collection }: Props) {
      {can.update && (
        <Empty>
          <Link to={newDocumentPath(collection.id)}>
-            <Button icon={<NewDocumentIcon color="currentColor" />} neutral>
+            <Button icon={<NewDocumentIcon />} neutral>
              {t("Create a document")}
            </Button>
          </Link>
--- a/app/scenes/Document/components/CommentThreadItem.tsx
+++ b/app/scenes/Document/components/CommentThreadItem.tsx
@@ -220,6 +220,7 @@ const Menu = styled(CommentMenu)<{ dir?: "rtl" | "ltr" }>`
  top: 4px;
  opacity: 0;
  transition: opacity 100ms ease-in-out;
+  color: ${s("textSecondary")};

  &:hover,
  &[aria-expanded="true"] {
--- a/app/scenes/Document/components/DocumentMeta.tsx
+++ b/app/scenes/Document/components/DocumentMeta.tsx
@@ -59,7 +59,7 @@ function TitleDocumentMeta({ to, isDraft, document, ...rest }: Props) {
            to={documentUrl(document)}
            onClick={() => ui.toggleComments(document.id)}
          >
-            <CommentIcon color="currentColor" size={18} />
+            <CommentIcon size={18} />
            {commentsCount
              ? t("{{ count }} comment", { count: commentsCount })
              : t("Comment")}
--- a/app/scenes/Document/components/Header.tsx
+++ b/app/scenes/Document/components/Header.tsx
@@ -115,7 +115,6 @@ function DocumentHeader({
          ui.tocVisible ? ui.hideTableOfContents : ui.showTableOfContents
        }
        icon={<TableOfContentsIcon />}
-        iconColor="currentColor"
        borderOnHover
        neutral
      />
@@ -327,7 +326,6 @@ function DocumentHeader({
                    label={(props) => (
                      <Button
                        icon={<MoreIcon />}
-                        iconColor="currentColor"
                        {...props}
                        borderOnHover
                        neutral
--- a/app/scenes/Document/components/Notices.tsx
+++ b/app/scenes/Document/components/Notices.tsx
@@ -39,8 +39,7 @@ export default function Notices({ document, readOnly }: Props) {
          icon={<ShapesIcon />}
          description={
            <Trans>
-              Highlight some text and use the{" "}
-              <PlaceholderIcon color="currentColor" /> control to add
+              Highlight some text and use the <PlaceholderIcon /> control to add
              placeholders that can be filled out when creating new documents
            </Trans>
          }
--- a/app/scenes/Document/components/ReferenceListItem.tsx
+++ b/app/scenes/Document/components/ReferenceListItem.tsx
@@ -76,11 +76,7 @@ function ReferenceListItem({
      {...rest}
    >
      <Content gap={4} dir="auto">
-        {emoji ? (
-          <EmojiIcon emoji={emoji} />
-        ) : (
-          <DocumentIcon color="currentColor" />
-        )}
+        {emoji ? <EmojiIcon emoji={emoji} /> : <DocumentIcon />}
        <Title>
          {emoji ? document.title.replace(emoji, "") : document.title}
        </Title>
--- a/app/scenes/Document/components/SharePopover.tsx
+++ b/app/scenes/Document/components/SharePopover.tsx
@@ -222,11 +222,7 @@ function SharePopover({
  return (
    <>
      <Heading>
-        {isPubliclyShared ? (
-          <GlobeIcon size={28} color="currentColor" />
-        ) : (
-          <PadlockIcon size={28} color="currentColor" />
-        )}
+        {isPubliclyShared ? <GlobeIcon size={28} /> : <PadlockIcon size={28} />}
        <span>{t("Share this document")}</span>
      </Heading>

@@ -327,7 +323,7 @@ function SharePopover({
          <span />
        ) : (
          <MoreOptionsButton
-            icon={<ExpandedIcon color="currentColor" />}
+            icon={<ExpandedIcon />}
            onClick={() => setExpandedOptions(true)}
            neutral
            borderOnHover
--- a/app/scenes/Drafts.tsx
+++ b/app/scenes/Drafts.tsx
@@ -51,7 +51,7 @@ function Drafts() {

  return (
    <Scene
-      icon={<EditIcon color="currentColor" />}
+      icon={<EditIcon />}
      title={t("Drafts")}
      actions={
        <>
--- a/app/scenes/Home.tsx
+++ b/app/scenes/Home.tsx
@@ -34,7 +34,7 @@ function Home() {

  return (
    <Scene
-      icon={<HomeIcon color="currentColor" />}
+      icon={<HomeIcon />}
      title={t("Home")}
      left={
        <InputSearchPage source="dashboard" label={t("Search documents")} />
--- a/app/scenes/Login/index.tsx
+++ b/app/scenes/Login/index.tsx
@@ -43,7 +43,7 @@ function Header({ config }: { config?: Config | undefined }) {

  return (
    <Back href={isSubdomain ? env.URL : "https://www.getoutline.com"}>
-      <BackIcon color="currentColor" /> {t("Back to home")}
+      <BackIcon /> {t("Back to home")}
    </Back>
  );
 }
@@ -169,7 +169,7 @@ function Login({ children }: Props) {
        <Header config={config} />
        <Centered align="center" justify="center" column auto>
          <PageTitle title={t("Check your email")} />
-          <CheckEmailIcon size={38} color="currentColor" />
+          <CheckEmailIcon size={38} />
          <Heading centered>{t("Check your email")}</Heading>
          <Note>
            <Trans
--- a/app/scenes/Search/components/RecentSearches.tsx
+++ b/app/scenes/Search/components/RecentSearches.tsx
@@ -37,7 +37,7 @@ function RecentSearches() {
                    searchQuery.delete();
                  }}
                >
-                  <CloseIcon color="currentColor" />
+                  <CloseIcon />
                </RemoveButton>
              </Tooltip>
            </RecentSearch>
--- a/app/scenes/Settings/Details.tsx
+++ b/app/scenes/Settings/Details.tsx
@@ -133,7 +133,7 @@ function Details() {

  return (
    <ThemeProvider theme={newTheme}>
-      <Scene title={t("Details")} icon={<TeamIcon color="currentColor" />}>
+      <Scene title={t("Details")} icon={<TeamIcon />}>
        <Heading>{t("Details")}</Heading>
        <Text type="secondary">
          <Trans>
--- a/app/scenes/Settings/Export.tsx
+++ b/app/scenes/Settings/Export.tsx
@@ -48,7 +48,7 @@ function Export() {
  );

  return (
-    <Scene title={t("Export")} icon={<DownloadIcon color="currentColor" />}>
+    <Scene title={t("Export")} icon={<DownloadIcon />}>
      <Heading>{t("Export")}</Heading>
      <Text type="secondary">
        <Trans
--- a/app/scenes/Settings/Features.tsx
+++ b/app/scenes/Settings/Features.tsx
@@ -35,7 +35,7 @@ function Features() {
  };

  return (
-    <Scene title={t("Features")} icon={<BeakerIcon color="currentColor" />}>
+    <Scene title={t("Features")} icon={<BeakerIcon />}>
      <Heading>{t("Features")}</Heading>
      <Text type="secondary">
        <Trans>
--- a/app/scenes/Settings/GoogleAnalytics.tsx
+++ b/app/scenes/Settings/GoogleAnalytics.tsx
@@ -80,10 +80,7 @@ function GoogleAnalytics() {
  );

  return (
-    <Scene
-      title={t("Google Analytics")}
-      icon={<GoogleIcon color="currentColor" />}
-    >
+    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
      <Heading>{t("Google Analytics")}</Heading>

      <Text type="secondary">
--- a/app/scenes/Settings/Groups.tsx
+++ b/app/scenes/Settings/Groups.tsx
@@ -33,7 +33,7 @@ function Groups() {
  return (
    <Scene
      title={t("Groups")}
-      icon={<GroupIcon color="currentColor" />}
+      icon={<GroupIcon />}
      actions={
        <>
          {can.createGroup && (
--- a/app/scenes/Settings/Import.tsx
+++ b/app/scenes/Settings/Import.tsx
@@ -26,7 +26,7 @@ function Import() {
  const appName = env.APP_NAME;

  return (
-    <Scene title={t("Import")} icon={<NewDocumentIcon color="currentColor" />}>
+    <Scene title={t("Import")} icon={<NewDocumentIcon />}>
      <Heading>{t("Import")}</Heading>
      <Text type="secondary">
        <Trans>
--- a/app/scenes/Settings/Members.tsx
+++ b/app/scenes/Settings/Members.tsx
@@ -148,7 +148,7 @@ function Members() {
  return (
    <Scene
      title={t("Members")}
-      icon={<UserIcon color="currentColor" />}
+      icon={<UserIcon />}
      actions={
        <>
          {can.inviteUser && (
--- a/app/scenes/Settings/Notifications.tsx
+++ b/app/scenes/Settings/Notifications.tsx
@@ -35,7 +35,7 @@ function Notifications() {
  const options = [
    {
      event: NotificationEventType.PublishDocument,
-      icon: <PublishIcon color="currentColor" />,
+      icon: <PublishIcon />,
      title: t("Document published"),
      description: t(
        "Receive a notification whenever a new document is published"
@@ -43,7 +43,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.UpdateDocument,
-      icon: <EditIcon color="currentColor" />,
+      icon: <EditIcon />,
      title: t("Document updated"),
      description: t(
        "Receive a notification when a document you are subscribed to is edited"
@@ -51,7 +51,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.CreateComment,
-      icon: <CommentIcon color="currentColor" />,
+      icon: <CommentIcon />,
      title: t("Comment posted"),
      description: t(
        "Receive a notification when a document you are subscribed to or a thread you participated in receives a comment"
@@ -59,7 +59,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.MentionedInComment,
-      icon: <EmailIcon color="currentColor" />,
+      icon: <EmailIcon />,
      title: t("Mentioned"),
      description: t(
        "Receive a notification when someone mentions you in a document or comment"
@@ -67,7 +67,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.CreateCollection,
-      icon: <CollectionIcon color="currentColor" />,
+      icon: <CollectionIcon />,
      title: t("Collection created"),
      description: t(
        "Receive a notification whenever a new collection is created"
@@ -75,7 +75,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.InviteAccepted,
-      icon: <UserIcon color="currentColor" />,
+      icon: <UserIcon />,
      title: t("Invite accepted"),
      description: t(
        "Receive a notification when someone you invited creates an account"
@@ -83,7 +83,7 @@ function Notifications() {
    },
    {
      event: NotificationEventType.ExportCompleted,
-      icon: <CheckboxIcon checked color="currentColor" />,
+      icon: <CheckboxIcon checked />,
      title: t("Export completed"),
      description: t(
        "Receive a notification when an export you requested has been completed"
@@ -91,14 +91,14 @@ function Notifications() {
    },
    {
      visible: isCloudHosted,
-      icon: <AcademicCapIcon color="currentColor" />,
+      icon: <AcademicCapIcon />,
      event: NotificationEventType.Onboarding,
      title: t("Getting started"),
      description: t("Tips on getting started with features and functionality"),
    },
    {
      visible: isCloudHosted,
-      icon: <StarredIcon color="currentColor" />,
+      icon: <StarredIcon />,
      event: NotificationEventType.Features,
      title: t("New features"),
      description: t("Receive an email when new features of note are added"),
@@ -124,7 +124,7 @@ function Notifications() {
  const showSuccessNotice = window.location.search === "?success";

  return (
-    <Scene title={t("Notifications")} icon={<EmailIcon color="currentColor" />}>
+    <Scene title={t("Notifications")} icon={<EmailIcon />}>
      <Heading>{t("Notifications")}</Heading>

      {showSuccessNotice && (
--- a/app/scenes/Settings/Preferences.tsx
+++ b/app/scenes/Settings/Preferences.tsx
@@ -51,10 +51,7 @@ function Preferences() {
  };

  return (
-    <Scene
-      title={t("Preferences")}
-      icon={<SettingsIcon color="currentColor" />}
-    >
+    <Scene title={t("Preferences")} icon={<SettingsIcon />}>
      <Heading>{t("Preferences")}</Heading>
      <Text type="secondary">
        <Trans>Manage settings that affect your personal experience.</Trans>
--- a/app/scenes/Settings/Profile.tsx
+++ b/app/scenes/Settings/Profile.tsx
@@ -61,7 +61,7 @@ const Profile = () => {
  const { isSaving } = auth;

  return (
-    <Scene title={t("Profile")} icon={<ProfileIcon color="currentColor" />}>
+    <Scene title={t("Profile")} icon={<ProfileIcon />}>
      <Heading>{t("Profile")}</Heading>
      <Text type="secondary">
        <Trans>Manage how you appear to other members of the workspace.</Trans>
--- a/app/scenes/Settings/Security.tsx
+++ b/app/scenes/Settings/Security.tsx
@@ -137,7 +137,7 @@ function Security() {
  );

  return (
-    <Scene title={t("Security")} icon={<PadlockIcon color="currentColor" />}>
+    <Scene title={t("Security")} icon={<PadlockIcon />}>
      <Heading>{t("Security")}</Heading>
      <Text type="secondary">
        <Trans>
@@ -155,8 +155,7 @@ function Security() {
            key={provider.name}
            label={
              <Flex gap={8} align="center">
-                <PluginIcon id={provider.name} color="currentColor" />{" "}
-                {provider.displayName}
+                <PluginIcon id={provider.name} /> {provider.displayName}
              </Flex>
            }
            name={provider.name}
@@ -178,7 +177,7 @@ function Security() {
      <SettingRow
        label={
          <Flex gap={8} align="center">
-            <EmailIcon color="currentColor" /> {t("Email")}
+            <EmailIcon /> {t("Email")}
          </Flex>
        }
        name="guestSignin"
--- a/app/scenes/Settings/SelfHosted.tsx
+++ b/app/scenes/Settings/SelfHosted.tsx
@@ -79,10 +79,7 @@ function SelfHosted() {
  );

  return (
-    <Scene
-      title={t("Self Hosted")}
-      icon={<BuildingBlocksIcon color="currentColor" />}
-    >
+    <Scene title={t("Self Hosted")} icon={<BuildingBlocksIcon />}>
      <Heading>{t("Self Hosted")}</Heading>

      <form onSubmit={formHandleSubmit(handleSubmit)}>
--- a/app/scenes/Settings/Shares.tsx
+++ b/app/scenes/Settings/Shares.tsx
@@ -67,12 +67,12 @@ function Shares() {
  }, [shares.orderedData, shareIds]);

  return (
-    <Scene title={t("Shared Links")} icon={<LinkIcon color="currentColor" />}>
+    <Scene title={t("Shared Links")} icon={<LinkIcon />}>
      <Heading>{t("Shared Links")}</Heading>

      {can.manage && !canShareDocuments && (
        <>
-          <Notice icon={<WarningIcon color="currentColor" />}>
+          <Notice icon={<WarningIcon />}>
            {t("Sharing is currently disabled.")}{" "}
            <Trans
              defaults="You can globally enable and disable public document sharing in the <em>security settings</em>."
--- a/app/scenes/Settings/Tokens.tsx
+++ b/app/scenes/Settings/Tokens.tsx
@@ -27,7 +27,7 @@ function Tokens() {
  return (
    <Scene
      title={t("API Tokens")}
-      icon={<CodeIcon color="currentColor" />}
+      icon={<CodeIcon />}
      actions={
        <>
          {can.createApiKey && (
--- a/app/scenes/Settings/Zapier.tsx
+++ b/app/scenes/Settings/Zapier.tsx
@@ -14,7 +14,7 @@ function Zapier() {
  const appName = env.APP_NAME;

  return (
-    <Scene title="Zapier" icon={<ZapierIcon color="currentColor" />}>
+    <Scene title="Zapier" icon={<ZapierIcon />}>
      <Heading>Zapier</Heading>
      <Helmet>
        <script
--- a/app/scenes/Templates.tsx
+++ b/app/scenes/Templates.tsx
@@ -25,7 +25,7 @@ function Templates(props: RouteComponentProps<{ sort: string }>) {

  return (
    <Scene
-      icon={<ShapesIcon color="currentColor" />}
+      icon={<ShapesIcon />}
      title={t("Templates")}
      actions={
        <Action>
--- a/app/scenes/Trash.tsx
+++ b/app/scenes/Trash.tsx
@@ -13,7 +13,7 @@ function Trash() {
  const { t } = useTranslation();
  const { documents } = useStores();
  return (
-    <Scene icon={<TrashIcon color="currentColor" />} title={t("Trash")}>
+    <Scene icon={<TrashIcon />} title={t("Trash")}>
      <Heading>{t("Trash")}</Heading>
      <PaginatedDocumentList
        documents={documents.deleted}
--- a/package.json
+++ b/package.json
@@ -140,7 +140,7 @@
    "natural-sort": "^1.0.0",
    "node-fetch": "2.6.7",
    "nodemailer": "^6.9.1",
-    "outline-icons": "^1.46.0",
+    "outline-icons": "^2.0.1",
    "oy-vey": "^0.12.0",
    "passport": "^0.6.0",
    "passport-google-oauth2": "^0.2.0",
--- a/plugins/webhooks/client/Settings.tsx
+++ b/plugins/webhooks/client/Settings.tsx
@@ -29,7 +29,7 @@ function Webhooks() {
  return (
    <Scene
      title={t("Webhooks")}
-      icon={<WebhooksIcon color="currentColor" />}
+      icon={<WebhooksIcon />}
      actions={
        <>
          {can.createWebhookSubscription && (
--- a/shared/editor/components/DisabledEmbed.tsx
+++ b/shared/editor/components/DisabledEmbed.tsx
@@ -14,7 +14,7 @@ export default function DisabledEmbed(props: Props & ThemeProps<DefaultTheme>) {
      isSelected={props.isSelected}
      theme={props.theme}
    >
-      <OpenIcon color="currentColor" size={20} />
+      <OpenIcon size={20} />
    </Widget>
  );
 }
--- a/shared/editor/components/FileExtension.tsx
+++ b/shared/editor/components/FileExtension.tsx
@@ -18,11 +18,7 @@ export default function FileExtension(props: Props) {
      style={{ background: stringToColor(extension || "") }}
      $size={props.size || 28}
    >
-      {extension ? (
-        <span>{extension?.slice(0, 4)}</span>
-      ) : (
-        <AttachmentIcon color="currentColor" />
-      )}
+      {extension ? <span>{extension?.slice(0, 4)}</span> : <AttachmentIcon />}
    </Icon>
  );
 }
--- a/shared/editor/components/Frame.tsx
+++ b/shared/editor/components/Frame.tsx
@@ -92,7 +92,7 @@ class Frame extends React.Component<PropsWithRef> {
                target="_blank"
                rel="noopener noreferrer"
              >
-                <OpenIcon color="currentColor" size={18} /> Open
+                <OpenIcon size={18} /> Open
              </Open>
            )}
          </Bar>
--- a/shared/editor/components/Image.tsx
+++ b/shared/editor/components/Image.tsx
@@ -172,7 +172,7 @@ const Image = (
      >
        {!dragging && size.width > 60 && size.height > 60 && props.onDownload && (
          <Button onClick={props.onDownload}>
-            <DownloadIcon color="currentColor" />
+            <DownloadIcon />
          </Button>
        )}
        <ImageZoom zoomMargin={24}>
--- a/shared/editor/marks/Link.tsx
+++ b/shared/editor/marks/Link.tsx
@@ -24,7 +24,7 @@ const LINK_INPUT_REGEX = /\[([^[]+)]\((\S+)\)$/;
 let icon: HTMLSpanElement;

 if (typeof window !== "undefined") {
-  const component = <OpenIcon color="currentColor" size={16} />;
+  const component = <OpenIcon size={16} />;
  icon = document.createElement("span");
  icon.className = "external-link";
  ReactDOM.render(component, icon);
--- a/shared/editor/nodes/Attachment.tsx
+++ b/shared/editor/nodes/Attachment.tsx
@@ -84,7 +84,7 @@ export default class Attachment extends Node {
        isSelected={isSelected}
        theme={theme}
      >
-        {node.attrs.href && <DownloadIcon color="currentColor" size={20} />}
+        {node.attrs.href && <DownloadIcon size={20} />}
      </Widget>
    );
  }
--- a/shared/editor/nodes/Notice.tsx
+++ b/shared/editor/nodes/Notice.tsx
@@ -72,11 +72,11 @@ export default class Notice extends Node {
          let component;

          if (node.attrs.style === "tip") {
-            component = <StarredIcon color="currentColor" />;
+            component = <StarredIcon />;
          } else if (node.attrs.style === "warning") {
-            component = <WarningIcon color="currentColor" />;
+            component = <WarningIcon />;
          } else {
-            component = <InfoIcon color="currentColor" />;
+            component = <InfoIcon />;
          }

          icon = document.createElement("div");
--- a/shared/editor/plugins/BlockMenuTrigger.tsx
+++ b/shared/editor/plugins/BlockMenuTrigger.tsx
@@ -60,7 +60,7 @@ export default class BlockMenuTrigger extends Extension {
    const button = document.createElement("button");
    button.className = "block-menu-trigger";
    button.type = "button";
-    ReactDOM.render(<PlusIcon color="currentColor" />, button);
+    ReactDOM.render(<PlusIcon />, button);

    return [
      new Plugin({
--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@@ -489,7 +489,7 @@
  "Sorry, the last change could not be persisted – please reload the page": "Sorry, the last change could not be persisted – please reload the page",
  "This template will be permanently deleted in <2></2> unless restored.": "This template will be permanently deleted in <2></2> unless restored.",
  "This document will be permanently deleted in <2></2> unless restored.": "This document will be permanently deleted in <2></2> unless restored.",
-  "Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents": "Highlight some text and use the <2></2> control to add placeholders that can be filled out when creating new documents",
+  "Highlight some text and use the <1></1> control to add placeholders that can be filled out when creating new documents": "Highlight some text and use the <1></1> control to add placeholders that can be filled out when creating new documents",
  "You’re editing a template": "You’re editing a template",
  "Archived by {{userName}}": "Archived by {{userName}}",
  "Deleted by {{userName}}": "Deleted by {{userName}}",
--- a/yarn.lock
+++ b/yarn.lock
@@ -10119,10 +10119,10 @@ os-tmpdir@~1.0.2:
  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
  integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==

-outline-icons@^1.46.0:
-  version "1.46.0"
-  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.46.0.tgz#04b8f3b1f3b33b0396ebecf30a70d05c90f1f136"
-  integrity sha512-zC69rYqIHW/vr4IC+2ceAGFYV7artcOTewgduGlNl5Sn+xw8sMdmB1RvIc2ctxd6lxtJRRF5jJ6CRqpo/tM2cg==
+outline-icons@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-2.0.1.tgz#8e7106863edb3d52a54a142aa596a6c5a541f9d2"
+  integrity sha512-ia1D2hCon7pAhfEK39HAww6Z0EnA2rhBJ82TOwQfwB/svN1m/j//9uQZLAb9a7qQWO0bR1DuSRGTXwkU+1Nl7A==

 oy-vey@^0.12.0:
  version "0.12.0"