chore: Bump outline-icons (#5170

* Bump outline-icons to default use currentColor

* wip

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, {
+      ? resolvedIcon
-          color: "currentColor",
-        })
       : undefined;
 
   if (resolvedChildren) {

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
+      <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" />
-        fill="currentColor"
+      <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" />
-        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"
-      />
     </svg>
   );
 }

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>
   );

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>
 

app/components/ContextMenu/MenuItem.tsx

@@ -78,15 +78,11 @@ const MenuItem = (
         >
           {selected !== undefined && (
             <>
-              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
+              {selected ? <CheckmarkIcon /> : <Spacer />}
               &nbsp;
             </>
           )}
-          {icon && (
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
           {children}
         </MenuAnchor>
       )}

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({
+export default function OverflowMenuButton({ className, ...rest }: Props) {
-  iconColor,
-  className,
-  ...rest
-}: Props) {
   return (
     <MenuButton {...rest}>
       {(props) => (
         <NudeButton className={className} {...props}>
-          <MoreIcon color={iconColor} />
+          <MoreIcon />
         </NudeButton>
       )}
     </MenuButton>

app/components/DefaultCollectionInputSelect.tsx

@@ -73,7 +73,7 @@ const DefaultCollectionInputSelect = ({
             label: (
               <Flex align="center">
                 <IconWrapper>
-                  <HomeIcon color="currentColor" />
+                  <HomeIcon />
                 </IconWrapper>
                 {t("Home")}
               </Flex>

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",
     };

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>
               )}

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,

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;
 

app/components/Header.tsx

@@ -63,7 +63,6 @@ function Header({ left, title, actions, hasSidebar }: Props) {
             <MobileMenuButton
               onClick={ui.toggleMobileSidebar}
               icon={<MenuIcon />}
-              iconColor="currentColor"
               neutral
             />
           )}

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.")}
       </>
     );
 

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>

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={

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}
                   />
                 ))}

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}

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>
   );
 }

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 && (
+          {id && <Disclosure expanded={expanded} size={20} />}
-            <Disclosure expanded={expanded} color="currentColor" size={20} />
-          )}
         </Button>
       </H3>
       {expanded && (firstRender ? children : <Fade>{children}</Fade>)}

app/components/Sidebar/components/HeaderButton.tsx

@@ -40,8 +40,8 @@ const HeaderButton = React.forwardRef<HTMLButtonElement, HeaderButtonProps>(
         {image}
         {title}
       </Title>
-      {showDisclosure && <ExpandedIcon color="currentColor" />}
+      {showDisclosure && <ExpandedIcon />}
-      {showMoreMenu && <MoreIcon color="currentColor" />}
+      {showMoreMenu && <MoreIcon />}
     </Wrapper>
   )
 );

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>

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}

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 === "loading" && <Spinner />}
-        {type === "info" && <InfoIcon color="currentColor" />}
+        {type === "info" && <InfoIcon />}
-        {type === "success" && <CheckboxIcon checked color="currentColor" />}
+        {type === "success" && <CheckboxIcon checked />}
-        {(type === "warning" || type === "error") && (
+        {(type === "warning" || type === "error") && <WarningIcon />}
-          <WarningIcon color="currentColor" />
-        )}
         <Message>{toast.message}</Message>
         {action && <Action onClick={action.onClick}>{action.text}</Action>}
       </Container>

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 ? (
+            {isInternal ? <ArrowIcon /> : <OpenIcon />}
-              <ArrowIcon color="currentColor" />
-            ) : (
-              <OpenIcon color="currentColor" />
-            )}
           </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);

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>
         );

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),
         };

app/menus/CollectionMenu.tsx

@@ -220,11 +220,7 @@ function CollectionMenu({
         type: "submenu",
         title: t("Sort in sidebar"),
         visible: can.update,
-        icon: alphabeticalSort ? (
+        icon: alphabeticalSort ? <AlphabeticalSortIcon /> : <ManualSortIcon />,
-          <AlphabeticalSortIcon color="currentColor" />
-        ) : (
-          <ManualSortIcon color="currentColor" />
-        ),
         items: [
           {
             type: "button",

app/menus/RevisionMenu.tsx

@@ -33,7 +33,6 @@ function RevisionMenu({ document, className }: Props) {
     <>
       <OverflowMenuButton
         className={className}
-        iconColor="currentColor"
         aria-label={t("Show menu")}
         {...menu}
       />

app/menus/TableOfContentsMenu.tsx

@@ -65,7 +65,6 @@ function TableOfContentsMenu({ headings }: Props) {
           <Button
             {...props}
             icon={<TableOfContentsIcon />}
-            iconColor="currentColor"
             borderOnHover
             neutral
           />

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}

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>

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"] {

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")}

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

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{" "}
+              Highlight some text and use the <PlaceholderIcon /> control to add
-              <PlaceholderIcon color="currentColor" /> control to add
               placeholders that can be filled out when creating new documents
             </Trans>
           }

app/scenes/Document/components/ReferenceListItem.tsx

@@ -76,11 +76,7 @@ function ReferenceListItem({
       {...rest}
     >
       <Content gap={4} dir="auto">
-        {emoji ? (
+        {emoji ? <EmojiIcon emoji={emoji} /> : <DocumentIcon />}
-          <EmojiIcon emoji={emoji} />
-        ) : (
-          <DocumentIcon color="currentColor" />
-        )}
         <Title>
           {emoji ? document.title.replace(emoji, "") : document.title}
         </Title>

app/scenes/Document/components/SharePopover.tsx

@@ -222,11 +222,7 @@ function SharePopover({
   return (
     <>
       <Heading>
-        {isPubliclyShared ? (
+        {isPubliclyShared ? <GlobeIcon size={28} /> : <PadlockIcon size={28} />}
-          <GlobeIcon size={28} color="currentColor" />
-        ) : (
-          <PadlockIcon size={28} color="currentColor" />
-        )}
         <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

app/scenes/Drafts.tsx

@@ -51,7 +51,7 @@ function Drafts() {
 
   return (
     <Scene
-      icon={<EditIcon color="currentColor" />}
+      icon={<EditIcon />}
       title={t("Drafts")}
       actions={
         <>

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")} />

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

app/scenes/Search/components/RecentSearches.tsx

@@ -37,7 +37,7 @@ function RecentSearches() {
                     searchQuery.delete();
                   }}
                 >
-                  <CloseIcon color="currentColor" />
+                  <CloseIcon />
                 </RemoveButton>
               </Tooltip>
             </RecentSearch>

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>

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

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>

app/scenes/Settings/GoogleAnalytics.tsx

@@ -80,10 +80,7 @@ function GoogleAnalytics() {
   );
 
   return (
-    <Scene
+    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
-      title={t("Google Analytics")}
-      icon={<GoogleIcon color="currentColor" />}
-    >
       <Heading>{t("Google Analytics")}</Heading>
 
       <Text type="secondary">

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 && (

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>

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 && (

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 && (

app/scenes/Settings/Preferences.tsx

@@ -51,10 +51,7 @@ function Preferences() {
   };
 
   return (
-    <Scene
+    <Scene title={t("Preferences")} icon={<SettingsIcon />}>
-      title={t("Preferences")}
-      icon={<SettingsIcon color="currentColor" />}
-    >
       <Heading>{t("Preferences")}</Heading>
       <Text type="secondary">
         <Trans>Manage settings that affect your personal experience.</Trans>

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>

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" />{" "}
+                <PluginIcon id={provider.name} /> {provider.displayName}
-                {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"

app/scenes/Settings/SelfHosted.tsx

@@ -79,10 +79,7 @@ function SelfHosted() {
   );
 
   return (
-    <Scene
+    <Scene title={t("Self Hosted")} icon={<BuildingBlocksIcon />}>
-      title={t("Self Hosted")}
-      icon={<BuildingBlocksIcon color="currentColor" />}
-    >
       <Heading>{t("Self Hosted")}</Heading>
 
       <form onSubmit={formHandleSubmit(handleSubmit)}>

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>."

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 && (

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

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>

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}

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",

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 && (

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>
   );
 }

shared/editor/components/FileExtension.tsx

@@ -18,11 +18,7 @@ export default function FileExtension(props: Props) {
       style={{ background: stringToColor(extension || "") }}
       $size={props.size || 28}
     >
-      {extension ? (
+      {extension ? <span>{extension?.slice(0, 4)}</span> : <AttachmentIcon />}
-        <span>{extension?.slice(0, 4)}</span>
-      ) : (
-        <AttachmentIcon color="currentColor" />
-      )}
     </Icon>
   );
 }

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>

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}>

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);

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>
     );
   }

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");

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({

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}}",

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