Use Discord Icons

src/equicordplugins/channelTabs/components/BookmarkContainer.tsx

@@ -8,6 +8,7 @@ import { classNameFactory } from "@api/Styles";
 import { getIntlMessage } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { closeModal, openModal } from "@utils/modal";
+import { findComponentByCodeLazy } from "@webpack";
 import { Avatar, ChannelStore, ContextMenuApi, FluxDispatcher, GuildStore, Menu, ReadStateStore, ReadStateUtils, Text, Tooltip, useDrag, useDrop, useEffect, useRef, UserStore } from "@webpack/common";
 
 import { BasicChannelTabsProps, Bookmark, BookmarkFolder, BookmarkProps, CircleQuestionIcon, isBookmarkFolder, settings, switchChannel, useBookmarks } from "../util";
@@ -16,23 +17,7 @@ import { BookmarkContextMenu, EditModal } from "./ContextMenus";
 
 const cl = classNameFactory("vc-channeltabs-");
 
-function StarIcon({ className = "", ...props }) {
+const StarIcon = findComponentByCodeLazy(".73-2.25h6.12l1.9-5.83Z");
-    return <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className={className}
-        {...props}
-    >
-        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-    </svg >;
-}
 
 function FolderIcon({ fill }: { fill: string; }) {
     return (
@@ -304,8 +289,9 @@ export default function BookmarkContainer(props: BasicChannelTabsProps & { userI
                 }}
                 >
                     <StarIcon
-                        className={isCurrentChannelBookmarked ? cl("bookmark-star-checked") : cl("bookmark-star")}
+                        height={20}
-                    />
+                        width={20}
+                        colorClass={isCurrentChannelBookmarked ? cl("bookmark-star-checked") : cl("bookmark-star")} />
                 </button>}
             </Tooltip>
         </div>

src/equicordplugins/channelTabs/components/ChannelTab.tsx

@@ -17,9 +17,7 @@ import { TabContextMenu } from "./ContextMenus";
 const ThreeDots = findComponentByCodeLazy(".dots,", "dotRadius:");
 const dotStyles = findByPropsLazy("numberBadge", "textBadge");
 
-function FriendsIcon() {
+const FriendsIcon = findComponentByCodeLazy("12h1a8");
-    return <svg className="linkButtonIcon_c91bad" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"></path><path fill="currentColor" d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z"></path></svg>;
-}
 const ChannelTypeIcon = findComponentByCodeLazy(".iconContainerWithGuildIcon,");
 
 const cl = classNameFactory("vc-channeltabs-");

src/equicordplugins/channelTabs/components/ChannelTabsContainer.tsx

@@ -6,6 +6,7 @@
 
 import { classNameFactory } from "@api/Styles";
 import { useForceUpdater } from "@utils/react";
+import { findComponentByCodeLazy } from "@webpack";
 import { Button, ContextMenuApi, Flex, FluxDispatcher, Forms, useCallback, useEffect, useRef, UserStore, useState } from "@webpack/common";
 
 import { BasicChannelTabsProps, ChannelTabsProps, createTab, handleChannelSwitch, openedTabs, openStartupTabs, saveTabs, settings, setUpdaterFunction, useGhostTabs } from "../util";
@@ -15,22 +16,7 @@ import { BasicContextMenu } from "./ContextMenus";
 
 type TabSet = Record<string, ChannelTabsProps[]>;
 
-function PlusSmallIcon() {
+const PlusSmallIcon = findComponentByCodeLazy("0v-5h5a1");
-    return <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-    >
-        <line x1="12" y1="5" x2="12" y2="19" />
-        <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>;
-}
 
 const cl = classNameFactory("vc-channeltabs-");
 

src/equicordplugins/channelTabs/util/constants.tsx

@@ -7,6 +7,7 @@
 import { definePluginSettings } from "@api/Settings";
 import { Logger } from "@utils/Logger";
 import { OptionType } from "@utils/types";
+import { findComponentByCodeLazy } from "@webpack";
 
 import { ChannelTabsPreview } from "../components/ChannelTabsContainer";
 
@@ -73,21 +74,4 @@ export const settings = definePluginSettings({
     }
 });
 
-export function CircleQuestionIcon({ height = 24, width = 24 }) {
+export const CircleQuestionIcon = findComponentByCodeLazy("10.58l-3.3-3.3a1");
-    return <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={width}
-        height={height}
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-    >
-        <circle cx="12" cy="12" r="10" />
-        <path d="M12 17h.01" />
-        <path d="M12 13c1.38 0 2.5-1.12 2.5-2.5S13.38 8 12 8s-2.5 1.12-2.5 2.5" />
-    </svg>;
-
-}

src/equicordplugins/loginWithQR/ui/index.ts

@@ -8,6 +8,7 @@ import "./styles.css";
 
 import { classNameFactory } from "@api/Styles";
 import { proxyLazy } from "@utils/lazy";
+import { findComponentByCodeLazy } from "@webpack";
 import { Forms } from "@webpack/common";
 import { ComponentType, HTMLAttributes } from "react";
 
@@ -35,4 +36,7 @@ export const { Spinner } = proxyLazy(() => Forms as any as {
     Spinner: Spinner,
     SpinnerTypes: typeof SpinnerTypes;
 });
+
+export const QrCodeIcon = findComponentByCodeLazy("0v3ZM20");
+
 export const cl = classNameFactory("qrlogin-");

src/equicordplugins/pinIcon/index.tsx

@@ -18,11 +18,10 @@
 
 import { EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";
+import { findComponentByCodeLazy } from "@webpack";
 import { Message } from "discord-types/general";
 
-function PinIcon({ style = {} }) {
+const PinIcon = findComponentByCodeLazy("1-.06-.63L6.16");
-    return <svg className="icon__9293f" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M19.38 11.38a3 3 0 0 0 4.24 0l.03-.03a.5.5 0 0 0 0-.7L13.35.35a.5.5 0 0 0-.7 0l-.03.03a3 3 0 0 0 0 4.24L13 5l-2.92 2.92-3.65-.34a2 2 0 0 0-1.6.58l-.62.63a1 1 0 0 0 0 1.42l9.58 9.58a1 1 0 0 0 1.42 0l.63-.63a2 2 0 0 0 .58-1.6l-.34-3.64L19 11l.38.38ZM9.07 17.07a.5.5 0 0 1-.08.77l-5.15 3.43a.5.5 0 0 1-.63-.06l-.42-.42a.5.5 0 0 1-.06-.63L6.16 15a.5.5 0 0 1 .77-.08l2.14 2.14Z" style={style}></path></svg>;
-}
 export default definePlugin({
     name: "PinIcon",
     description: "Adds a pin icon to pinned messages",
@@ -37,6 +36,6 @@ export default definePlugin({
         }
     ],
     PinnedIcon({ pinned }: Message) {
-        return pinned ? (<PinIcon style={{ position: "absolute", right: "0", top: "0" }} />) : null;
+        return pinned ? (<PinIcon size="xs" style={{ position: "absolute", right: "0", top: "0" }} />) : null;
     }
 });

src/equicordplugins/sidebarChat/index.tsx

@@ -44,41 +44,8 @@ interface ContextMenuProps {
     user: User;
 }
 
-function ArrowsLeftRightIcon() {
+const ArrowsLeftRightIcon = findComponentByCodeLazy("18.58V3a1");
-    return <svg
+const XSmallIcon = findComponentByCodeLazy("13.42l5.3");
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-    >
-        <polyline points="17 11 21 7 17 3" />
-        <line x1="21" y1="7" x2="9" y2="7" />
-        <polyline points="7 21 3 17 7 13" />
-        <line x1="15" y1="17" x2="3" y2="17" />
-    </svg>;
-}
-
-function XSmallIcon() {
-    return <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-    >
-        <line x1="18" y1="6" x2="6" y2="18" />
-        <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>;
-}
 
 function MakeContextCallback(name: "user" | "channel"): NavContextMenuPatchCallback {
     return (children, { user, channel, guildId }: ContextMenuProps) => {
@@ -156,7 +123,7 @@ export default definePlugin({
                     toolbar={
                         <>
                             <HeaderBarIcon
-                                icon={ArrowsLeftRightIcon}
+                                icon={() => <ArrowsLeftRightIcon style={{ transform: "rotate(90deg)" }} />}
                                 tooltip="Switch channels"
                                 onClick={() => {
                                     const currentChannel = ChannelStore.getChannel(SelectedChannelStore.getChannelId());

src/equicordplugins/statusPresets/index.tsx

@@ -46,22 +46,9 @@ interface Emoji {
     id: bigint | null;
     name: string;
 }
-function CircleXIcon() {
+
-    return <svg
+const CircleXIcon = findComponentByCodeLazy("22Zm4.7-15.7a1");
-        xmlns="http://www.w3.org/2000/svg"
+
-        width="16" height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-    >
-        <circle cx="12" cy="12" r="10" />
-        <line x1="15" y1="9" x2="9" y2="15" />
-        <line x1="9" y1="9" x2="15" y2="15" />
-    </svg>;
-}
 interface DiscordStatus {
     emojiInfo: Emoji | null;
     text: string;