Move icons to svg file

packages/app/src/Element/BackButton.tsx

@@ -1,7 +1,7 @@
 import "./BackButton.css";
 import { useIntl } from "react-intl";
 
-import ArrowBack from "Icons/ArrowBack";
+import Icon from "Icons/Icon";
 
 import messages from "./messages";
 
@@ -20,7 +20,7 @@ const BackButton = ({ text, onClick }: BackButtonProps) => {
 
   return (
     <button className="back-button" type="button" onClick={onClickHandler}>
-      <ArrowBack />
+      <Icon name="arrowBack" />
       {text || formatMessage(messages.Back)}
     </button>
   );

packages/app/src/Element/Collapsed.tsx

@@ -1,6 +1,6 @@
 import { useState, ReactNode } from "react";
 
-import ChevronDown from "Icons/ChevronDown";
+import Icon from "Icons/Icon";
 import ShowMore from "Element/ShowMore";
 
 interface CollapsedProps {
@@ -38,7 +38,7 @@ export const CollapsedSection = ({ title, children }: CollapsedSectionProps) =>
   const [collapsed, setCollapsed] = useState(true);
   const icon = (
     <div className={`collapse-icon ${collapsed ? "" : "flip"}`} onClick={() => setCollapsed(!collapsed)}>
-      <ChevronDown />
+      <Icon name="chevronDown" />
     </div>
   );
   return (

packages/app/src/Element/Copy.tsx

@@ -1,6 +1,5 @@
 import "./Copy.css";
-import Check from "Icons/Check";
-import CopyIcon from "Icons/Copy";
+import Icon from "Icons/Icon";
 import { useCopy } from "useCopy";
 
 export interface CopyProps {
@@ -16,7 +15,7 @@ export default function Copy({ text, maxSize = 32 }: CopyProps) {
     <div className="flex flex-row copy" onClick={() => copy(text)}>
       <span className="body">{trimmed}</span>
       <span className="icon" style={{ color: copied ? "var(--success)" : "var(--highlight)" }}>
-        {copied ? <Check width={14} height={14} /> : <CopyIcon width={14} height={14} />}
+        {copied ? <Icon name="check" size={14} /> : <Icon name="copy" size={14} />}
       </span>
     </div>
   );

packages/app/src/Element/Invoice.css

@@ -85,4 +85,5 @@
   position: absolute;
   top: 26px;
   right: 20px;
+  color: var(--font-color);
 }

packages/app/src/Element/Invoice.tsx

@@ -4,7 +4,7 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { decode as invoiceDecode } from "light-bolt11-decoder";
 import { useMemo } from "react";
 import SendSats from "Element/SendSats";
-import ZapCircle from "Icons/ZapCircle";
+import Icon from "Icons/Icon";
 import useWebln from "Hooks/useWebln";
 
 import messages from "./messages";
@@ -58,7 +58,7 @@ export default function Invoice(props: InvoiceProps) {
         <h4>
           <FormattedMessage {...messages.Invoice} />
         </h4>
-        <ZapCircle className="zap-circle" />
+        <Icon name="zapCircle" className="zap-circle" />
         <SendSats
           title={formatMessage(messages.PayInvoice)}
           invoice={invoice}

packages/app/src/Element/Nip05.tsx

@@ -1,6 +1,6 @@
 import "./Nip05.css";
 import { useQuery } from "react-query";
-import Badge from "Icons/Badge";
+import Icon from "Icons/Icon";
 import { HexKey } from "@snort/nostr";
 
 interface NostrJson {
@@ -62,7 +62,7 @@ const Nip05 = ({ nip05, pubkey, verifyNip = true }: Nip05Params) => {
           <span className="domain" data-domain={domain?.toLowerCase()}>
             {domain}
           </span>
-          <Badge className="badge" />
+          <Icon name="badge" className="badge" />
         </>
       )}
     </div>

packages/app/src/Element/Note.tsx

@@ -6,8 +6,7 @@ import { useInView } from "react-intersection-observer";
 import { useIntl, FormattedMessage } from "react-intl";
 
 import useEventPublisher from "Feed/EventPublisher";
-import Bookmark from "Icons/Bookmark";
-import Pin from "Icons/Pin";
+import Icon from "Icons/Icon";
 import { parseZap } from "Element/Zap";
 import ProfileImage from "Element/ProfileImage";
 import Text from "Element/Text";
@@ -274,7 +273,7 @@ export default function Note(props: NoteProps) {
               <div className="info">
                 {options.showBookmarked && (
                   <div className={`saved ${options.canUnbookmark ? "pointer" : ""}`} onClick={() => unbookmark(ev.Id)}>
-                    <Bookmark /> <FormattedMessage {...messages.Bookmarked} />
+                    <Icon name="bookmark" /> <FormattedMessage {...messages.Bookmarked} />
                   </div>
                 )}
                 {!options.showBookmarked && <NoteTime from={ev.CreatedAt * 1000} />}
@@ -282,7 +281,7 @@ export default function Note(props: NoteProps) {
             )}
             {options.showPinned && (
               <div className={`pinned ${options.canUnpin ? "pointer" : ""}`} onClick={() => unpin(ev.Id)}>
-                <Pin /> <FormattedMessage {...messages.Pinned} />
+                <Icon name="pin" /> <FormattedMessage {...messages.Pinned} />
               </div>
             )}
           </div>

packages/app/src/Element/NoteCreator.tsx

@@ -2,7 +2,7 @@ import "./NoteCreator.css";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import Attachment from "Icons/Attachment";
+import Icon from "Icons/Icon";
 import useEventPublisher from "Feed/EventPublisher";
 import { openFile } from "Util";
 import Textarea from "Element/Textarea";
@@ -113,7 +113,7 @@ export function NoteCreator(props: NoteCreatorProps) {
                 onFocus={() => setActive(true)}
               />
               <button type="button" className="attachment" onClick={attachFile}>
-                <Attachment />
+                <Icon name="attachment" />
               </button>
             </div>
             {hasErrors && <span className="error">{error}</span>}

packages/app/src/Element/NoteFooter.tsx

@@ -4,21 +4,8 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { Menu, MenuItem } from "@szhsin/react-menu";
 import { useLongPress } from "use-long-press";
 
-import Bookmark from "Icons/Bookmark";
-import Pin from "Icons/Pin";
-import Json from "Icons/Json";
-import Repost from "Icons/Repost";
-import Trash from "Icons/Trash";
-import Translate from "Icons/Translate";
-import Block from "Icons/Block";
-import Mute from "Icons/Mute";
-import Share from "Icons/Share";
-import Copy from "Icons/Copy";
-import Dislike from "Icons/Dislike";
-import Heart from "Icons/Heart";
-import Dots from "Icons/Dots";
-import Zap from "Icons/Zap";
-import Reply from "Icons/Reply";
+import Icon from "Icons/Icon";
+
 import { formatShort } from "Number";
 import useEventPublisher from "Feed/EventPublisher";
 import { hexToBech32, normalizeReaction, unwrap } from "Util";
@@ -35,7 +22,6 @@ import { TranslateHost } from "Const";
 import useWebln from "Hooks/useWebln";
 import { LNURL } from "LNURL";
 import Spinner from "Icons/Spinner";
-import ZapFast from "Icons/ZapFast";
 
 import messages from "./messages";
 
@@ -149,7 +135,7 @@ export default function NoteFooter(props: NoteFooterProps) {
       return (
         <>
           <div className={`reaction-pill ${didZap ? "reacted" : ""}`} {...longPress()} onClick={e => fastZap(e)}>
-            <div className="reaction-pill-icon">{zapping ? <Spinner /> : webln?.enabled ? <ZapFast /> : <Zap />}</div>
+            <div className="reaction-pill-icon">{zapping ? <Spinner /> : webln?.enabled ? <Icon name="zapFast" /> : <Icon name="zap" />}</div>
             {zapTotal > 0 && <div className="reaction-pill-number">{formatShort(zapTotal)}</div>}
           </div>
         </>
@@ -162,7 +148,7 @@ export default function NoteFooter(props: NoteFooterProps) {
     return (
       <div className={`reaction-pill ${hasReposted() ? "reacted" : ""}`} onClick={() => repost()}>
         <div className="reaction-pill-icon">
-          <Repost width={18} height={16} />
+          <Icon name="repost" size={18} />
         </div>
         {reposts.length > 0 && <div className="reaction-pill-number">{formatShort(reposts.length)}</div>}
       </div>
@@ -179,7 +165,7 @@ export default function NoteFooter(props: NoteFooterProps) {
           className={`reaction-pill ${hasReacted("+") ? "reacted" : ""} `}
           onClick={() => react(prefs.reactionEmoji)}>
           <div className="reaction-pill-icon">
-            <Heart />
+            <Icon name="heart" />
           </div>
           <div className="reaction-pill-number">{formatShort(positive.length)}</div>
         </div>
@@ -256,56 +242,56 @@ export default function NoteFooter(props: NoteFooterProps) {
           </MenuItem>
         </div>
         <MenuItem onClick={() => setShowReactions(true)}>
-          <Heart />
+          <Icon name="heart" />
           <FormattedMessage {...messages.Reactions} />
         </MenuItem>
         <MenuItem onClick={() => share()}>
-          <Share />
+          <Icon name="share" />
           <FormattedMessage {...messages.Share} />
         </MenuItem>
         {!pinned.includes(ev.Id) && (
           <MenuItem onClick={() => pin(ev.Id)}>
-            <Pin />
+            <Icon name="pin" />
             <FormattedMessage {...messages.Pin} />
           </MenuItem>
         )}
         {!bookmarked.includes(ev.Id) && (
           <MenuItem onClick={() => bookmark(ev.Id)}>
-            <Bookmark width={18} height={18} />
+            <Icon name="bookmark" size={18} />
             <FormattedMessage {...messages.Bookmark} />
           </MenuItem>
         )}
         <MenuItem onClick={() => copyId()}>
-          <Copy />
+          <Icon name="dislike" />
           <FormattedMessage {...messages.CopyID} />
         </MenuItem>
         <MenuItem onClick={() => mute(ev.PubKey)}>
-          <Mute />
+          <Icon name="mute" />
           <FormattedMessage {...messages.Mute} />
         </MenuItem>
         {prefs.enableReactions && (
           <MenuItem onClick={() => react("-")}>
-            <Dislike />
+            <Icon name="copy" />
             <FormattedMessage {...messages.DislikeAction} />
           </MenuItem>
         )}
         <MenuItem onClick={() => block(ev.PubKey)}>
-          <Block />
+          <Icon name="block" />
           <FormattedMessage {...messages.Block} />
         </MenuItem>
         <MenuItem onClick={() => translate()}>
-          <Translate />
+          <Icon name="translate" />
           <FormattedMessage {...messages.TranslateTo} values={{ lang: langNames.of(lang.split("-")[0]) }} />
         </MenuItem>
         {prefs.showDebugMenus && (
           <MenuItem onClick={() => copyEvent()}>
-            <Json />
+            <Icon name="json" />
             <FormattedMessage {...messages.CopyJSON} />
           </MenuItem>
         )}
         {isMine && (
           <MenuItem onClick={() => deleteEvent()}>
-            <Trash className="red" />
+            <Icon name="trash" className="red" />
             <FormattedMessage {...messages.Delete} />
           </MenuItem>
         )}
@@ -321,14 +307,14 @@ export default function NoteFooter(props: NoteFooterProps) {
           {reactionIcons()}
           <div className={`reaction-pill ${reply ? "reacted" : ""}`} onClick={() => setReply(s => !s)}>
             <div className="reaction-pill-icon">
-              <Reply />
+              <Icon name="reply" />
             </div>
           </div>
           <Menu
             menuButton={
               <div className="reaction-pill">
                 <div className="reaction-pill-icon">
-                  <Dots />
+                  <Icon name="dots" />
                 </div>
               </div>
             }

packages/app/src/Element/Reactions.tsx

@@ -6,15 +6,11 @@ import { useIntl, FormattedMessage } from "react-intl";
 import { TaggedRawEvent } from "@snort/nostr";
 
 import { formatShort } from "Number";
-import Repost from "Icons/Repost";
-import Dislike from "Icons/Dislike";
-import Heart from "Icons/Heart";
-import ZapIcon from "Icons/Zap";
+import Icon from "Icons/Icon";
 import { Tab } from "Element/Tabs";
 import { ParsedZap } from "Element/Zap";
 import ProfileImage from "Element/ProfileImage";
 import Tabs from "Element/Tabs";
-import Close from "Icons/Close";
 import Modal from "Element/Modal";
 
 import messages from "./messages";
@@ -81,7 +77,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
     <Modal className="reactions-modal" onClose={onClose}>
       <div className="reactions-view">
         <div className="close" onClick={onClose}>
-          <Close />
+          <Icon name="close" />
         </div>
         <div className="reactions-header">
           <h2>
@@ -95,7 +91,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
               return (
                 <div key={ev.id} className="reactions-item">
                   <div className="reaction-icon">
-                    {ev.content === "+" ? <Heart width={20} height={18} /> : ev.content}
+                    {ev.content === "+" ? <Icon name="heart" /> : ev.content}
                   </div>
                   <ProfileImage autoWidth={false} pubkey={ev.pubkey} />
                 </div>
@@ -107,7 +103,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
                 z.zapper && (
                   <div key={z.id} className="reactions-item">
                     <div className="zap-reaction-icon">
-                      <ZapIcon width={17} height={20} />
+                      <Icon name="zap" size={20} />
                       <span className="zap-amount">{formatShort(z.amount)}</span>
                     </div>
                     <ProfileImage
@@ -129,7 +125,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
               return (
                 <div key={ev.id} className="reactions-item">
                   <div className="reaction-icon">
-                    <Repost width={16} height={16} />
+                    <Icon name="repost" size={16} />
                   </div>
                   <ProfileImage autoWidth={false} pubkey={ev.pubkey} />
                 </div>
@@ -140,7 +136,7 @@ const Reactions = ({ show, setShow, positive, negative, reposts, zaps }: Reactio
               return (
                 <div key={ev.id} className="reactions-item">
                   <div className="reaction-icon">
-                    <Dislike width={20} height={18} />
+                    <Icon name="dislike" />
                   </div>
                   <ProfileImage autoWidth={false} pubkey={ev.pubkey} />
                 </div>

packages/app/src/Element/RelaysMetadata.tsx

@@ -3,8 +3,7 @@ import Nostrich from "nostrich.webp";
 import { useState } from "react";
 
 import { FullRelaySettings } from "@snort/nostr";
-import Read from "Icons/Read";
-import Write from "Icons/Write";
+import Icon from "Icons/Icon";
 
 const RelayFavicon = ({ url }: { url: string }) => {
   const cleanUrl = url
@@ -30,8 +29,8 @@ const RelaysMetadata = ({ relays }: RelaysMetadataProps) => {
             <RelayFavicon url={url} />
             <code className="relay-url f-ellipsis">{url}</code>
             <div className="relay-settings">
-              <Read className={settings.read ? "enabled" : "disabled"} />
-              <Write className={settings.write ? "enabled" : "disabled"} />
+              <Icon name="read" className={settings.read ? "enabled" : "disabled"} />
+              <Icon name="write" className={settings.write ? "enabled" : "disabled"} />
             </div>
           </div>
         );

packages/app/src/Element/SendSats.tsx

@@ -6,9 +6,7 @@ import { useSelector } from "react-redux";
 import { formatShort } from "Number";
 import { Event, HexKey, Tag } from "@snort/nostr";
 import { RootState } from "State/Store";
-import Check from "Icons/Check";
-import Zap from "Icons/Zap";
-import Close from "Icons/Close";
+import Icon from "Icons/Icon";
 import useEventPublisher from "Feed/EventPublisher";
 import ProfileImage from "Element/ProfileImage";
 import Modal from "Element/Modal";
@@ -259,7 +257,7 @@ export default function SendSats(props: SendSatsProps) {
         {(amount ?? 0) > 0 && (
           <button type="button" className="zap-action" onClick={() => loadInvoice()}>
             <div className="zap-action-container">
-              <Zap />
+              <Icon name="zap" />
               {target ? (
                 <FormattedMessage {...messages.ZapTarget} values={{ target, n: formatShort(amount) }} />
               ) : (
@@ -334,7 +332,7 @@ export default function SendSats(props: SendSatsProps) {
     return (
       <div className="success-action">
         <p className="paid">
-          <Check className="success mr10" />
+          <Icon name="check" className="success mr10" />
           {success?.description ?? <FormattedMessage {...messages.Paid} />}
         </p>
         {success.url && (
@@ -360,7 +358,7 @@ export default function SendSats(props: SendSatsProps) {
     <Modal className="lnurl-modal" onClose={onClose}>
       <div className="lnurl-tip" onClick={e => e.stopPropagation()}>
         <div className="close" onClick={onClose}>
-          <Close />
+          <Icon name="close" />
         </div>
         <div className="lnurl-header">
           {author && <ProfileImage pubkey={author} showUsername={false} />}

packages/app/src/Element/Timeline.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 import { useCallback, useEffect, useMemo } from "react";
 import { useInView } from "react-intersection-observer";
 
-import ArrowUp from "Icons/ArrowUp";
+import Icon from "Icons/Icon";
 import { dedupeById, dedupeByPubkey, tagFilterOfTextRepost } from "Util";
 import ProfileImage from "Element/ProfileImage";
 import useTimelineFeed, { TimelineSubject } from "Feed/TimelineFeed";
@@ -127,7 +127,7 @@ export default function Timeline({
               defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
               values={{ n: latestFeed.length }}
             />
-            <ArrowUp />
+            <Icon name="arrowUp" />
           </div>
           {!inView && (
             <div className="card latest-notes latest-notes-fixed pointer fade-in" onClick={() => onShowLatest(true)}>
@@ -138,7 +138,7 @@ export default function Timeline({
                 defaultMessage="{n} new {n, plural, =1 {note} other {notes}}"
                 values={{ n: latestFeed.length }}
               />
-              <ArrowUp />
+              <Icon name="arrowUp" />
             </div>
           )}
         </>