#IconViewer

1 messages · Page 1 of 1 (latest)

formal frigate
#

IconViewer
Adds a new tab to settings, to preview all icons

useful for plugin dev and css styling.

features:

  • preview icons
  • copy icon names and css variables
  • ability to download icons in different formats (SVG, PNG, GIF, etc.).
  • copy pre-made icon finds for your plugins (Only some icons have this, submit finds either in a server or dms)
  • find icons by function context (helpful when creating finds)
  • search for colors by right clicking the color name in the modal title
    github:

https://github.com/coldcord/iconViewer
command:

git clone https://github.com/coldcord/iconViewer.git
2QkyR38.png
candid tangle
#

LETS GO IT DROPPED

swift ermine
#

Vencord icon packs..,,..,.,...,.

quartz iron
#

what if instead of icon viewer it was freaky viewer

formal frigate
quartz iron
candid tangle
#

@formal frigate One thing is what about putting a short cut here in the ToolBox

image.png
narrow wolf
#

can anyone create a plugin

#

that can able to optimize the loading speed and the videos when uploading

mint stump
formal frigate
torn night
#

also add the ability to download an icon with the ability to choose the size with the ones available and the file extension (.jpg, .png...)

#

@formal frigate

#

good job btw

candid tangle
formal frigate
formal frigate
#

this may take a while..

fatal: unable to access 'https://github.com/coldcord/iconViewer.git/': Could not resolve host: github.com

speedtest been loading for 3 minutes

HeyDu2o.png
candid tangle
formal frigate
torn night
formal frigate
torn night
#

looks so scary 😱

formal frigate
#

I am dead serious SKULL_SKELETON

#

do you think you can simply download a react component

candid tangle
#

Bruh

nocturne oriole
candid tangle
nocturne oriole
formal frigate
candid tangle
#

please

nocturne oriole
torn night
candid tangle
nocturne oriole
floral bone
# formal frigate I could write a lexer but is it worth it? even if I would I am not in the mood

I fucked around a bit and got something working

<Icon onClick={event => saveIcon(iconName, event.currentTarget, color)}
                          className="vc-icon-modal-icon"
                          color={cssColors[color]?.css}/>```

```ts
function saveIcon(iconName: string, icon: EventTarget & SVGSVGElement, color: number) {
    // iterate over children of svg, if they have fill, resolve the var
    const innerElements = icon.children;
    for (const el of innerElements) {
        const fill = el.getAttribute("fill");
        if (fill && fill.startsWith("var(")) {
            el.setAttribute("fill", getComputedStyle(icon).getPropertyValue(fill.replace("var(", "").replace(")", "")));
        }
    }

    // save svg as png
    const canvas = document.createElement("canvas");
    const size = 1024;
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    const img = new Image();

    img.onload = () => {
        ctx.drawImage(img, 0, 0, size, size);
        const link = document.createElement("a");
        link.download = `${iconName}-${cssColors[color]?.name ?? "unknown"}.png`;
        link.href = canvas.toDataURL("image/png");
        link.click();
    };

    img.src = `data:image/svg+xml;base64,${btoa(icon.outerHTML)}`;
}```
#

You could probably add in size and format options pretty easily

#

this just saves a 1024x1024 png when you click the large icon in the modal

formal frigate
candid tangle
formal frigate
candid tangle
formal frigate
#

yk like how to improve it, and suggestions so on

candid tangle
formal frigate
#

new features been added

#

all listed in the original message.
special thanks to: krystalskullofficial, suffocate

floral bone
#

Pretty sick

#

Might be good to have a dropdown for the colours as well as opposed to the left/right arrow

candid tangle
#

@formal frigate love the new update
(avif my beloved)

candid tangle
nocturne oriole
#

if u go too far left or right it crashes :c

formal frigate
floral bone
#

If you go left far enough, the if (Number(key) < 0) key = String(Object.keys(Colors.colors).length + Number(key)); line makes the key negative still because eventually key will be negative by more than the number of colours

#

You'd probably be better off just stopping them at either end or doing the dropdown instead

candid tangle
#

I likey the drop down idea

candid tangle
#

I can replicate it and that’s the only thing it shows in the Dev console

formal frigate
floral bone
#

If Object.keys(Colors.colors).length were 10 and you got the key to like -3, your code would make it 7 instead, but once the key gets to say, -16, your code will just make the key -6

formal frigate
#

ohhh

#

will fix later, there is a temporary fix rn

chilly stump
#

input error text?

formal frigate
chilly stump
floral bone
#

Input error text is the name of that colour, you use the arrow keys to change colours

regal lion
#

i love this plugin blobcatcozy

chilly stump
formal frigate
compact moon
#

Just a small improvement, you can use ReactDOM to convert jsx into html, the same way react does

import { ReactDOM } from "@webpack/common";
import type { ReactNode } from "react";

export function convertComponentToHtml(component?: ReactNode): string {
    const container = document.createElement("div");
    const root = ReactDOM.createRoot(container);

    ReactDOM.flushSync(() => root.render(component));
    const content = container.innerHTML;
    root.unmount();

    return content;
}
spiral apex
#

Dude @formal frigate I use this plugin

#

thanks

candid tangle
#

Bluesky jumpscare

image.png
formal frigate
candid tangle
formal frigate
#

wait that works

#

all issues been acknowledged and fixed. enjoy blobcatcozy

candid tangle
#

@formal frigate Is there a reason the authors is left empty

image.png
brittle knoll
#

he didn't feel like putting it in there manly_smile

formal frigate
spiral apex
upper solar
#

@formal frigate Is the plugin fixed or?

formal frigate
upper solar
candid tangle
#

Why did this just show up?

image.png
regal lion
#

idk probably something insane related to potions

candid tangle
formal frigate
formal frigate
#

discord single handedly destroyed this plugin future, this may not be fixed any time soon, sorry. (hope they revert back)

candid tangle
candid tangle
candid tangle
# candid tangle

@formal frigate it’s not the same, but at least this is something that would let us see all of them

formal frigate
#

||grr plugin name randomizer||

candid tangle
formal frigate
#

make some offset system so if discord added other icons.
it won't instantly break

floral bone
# candid tangle

This find isn't perfect, it misses coloured icons like crunchyroll and bluesky

#

But I didn't spend long on it

candid tangle
reef badgeBOT
#

better-social-links.css: Lines 27-29

[class*="anchorUnderlineOnHover_"][aria-label="twitter" i],
[class*="anchorUnderlineOnHover_"][title="twitter" i]{
    color: var(--twitter-color);
#

better-social-links.css: Lines 120-122

[d="M13.86 10.47 21.15 2h-1.73l-6.33 7.35L8.04 2H2.22l7.64 11.12L2.22 22h1.72l6.68-7.77L15.96 22h5.82l-7.92-11.53Zm-2.36 2.75-.78-1.11L4.57 3.3h2.65l4.97 7.11.77 1.1 6.46 9.25h-2.65l-5.27-7.54Z"] {
    d: path("m20.75 7.51.01.59c0 5.96-4.54 12.84-12.84 12.84-2.45 0-4.86-.7-6.92-2.03a9.06 9.06 0 0 0 6.68-1.87 4.52 4.52 0 0 1-4.22-3.13c.68.13 1.38.1 2.04-.08A4.51 4.51 0 0 1 1.88 9.4v-.05c.63.35 1.33.54 2.05.56a4.52 4.52 0 0 1-1.4-6.02 12.81 12.81 0 0 0 9.3 4.71 4.52 4.52 0 0 1 7.7-4.12 9.06 9.06 0 0 0 2.86-1.1 4.53 4.53 0 0 1-1.98 2.5c.9-.1 1.77-.34 2.59-.7-.6.9-1.37 1.7-2.25 2.33Z");
}
candid tangle
#

IDK this plug-in just seems too useful to give up on. Seems like there’s some other way to do it.

#

Even if we do lose the names

floral bone
#

It makes searching harder but the names aren't all that important tbf. For dev stuff you can use react dev tools on the icon you want and it'll take you straight to the svg where you can make a find

candid tangle
#

Agreed... i think… even when it comes to using this for theme development makes arnt important and they can be found other ways in the list

formal frigate
#

if possible ofc

floral bone
#

Yeah tbh even just iterating through the path string until it no longer matches any others would work, you don't have to go very far in most

final hinge
#

@formal frigate I think it would be fine to just show the icons without names

#

Because names aren't going to be used in code anyway

candid tangle
quartz iron
#

broken

X [ERROR] No matching export in "src/webpack/common/index.ts" for import "Icons"

src/userplugins/iconViewer/utils.tsx:9:31:
  9 │ import { Clickable, Clipboard, Icons as OrgIcons, React, ReactDOM, TooltipContainer } from "@webpack/common";
    ╵                                ~~~~~

1 error
Build failed
Build failed with 1 error:
src/userplugins/iconViewer/utils.tsx:9:31: ERROR: No matching export in "src/webpack/common/index.ts" for import "Icons"
X [ERROR] No matching export in "src/webpack/common/index.ts" for import "Icons"

src/userplugins/iconViewer/utils.tsx:9:31:
  9 │ import { Clickable, Clipboard, Icons as OrgIcons, React, ReactDOM, TooltipContainer } from "@webpack/common";
    ╵                                ~~~~~

1 error
 ELIFECYCLE  Command failed with exit code 1.

regal lion
#

at least. not in the same way as before

#

discord entirely broke the icons module

quartz iron
#

oh

regal lion
#

i'm sad about it too

brittle knoll
#

guh

candid tangle
#

soo @formal frigate

formal frigate
candid tangle
formal frigate
#

using a find is enough to fix it but I am not feeling like doing anything vencord/typescript related

formal frigate
#

hey @floral bone I lost the find that you made, does it still work?

formal frigate
#

found a find

safe walrus
#

@final hinge dont you dare I dont check this channel everday im too lazy

#

IM LAZY ELVYRA HE AINT OBLIGATED💔

formal frigate
#

discord exports their icons more than once blobhuskcozy

yBLTpJ2.png
floral bone
#

My find picks up some very big svgs too that block a chunk of the list lol

#

Oh nvm I lied, I just looked and I guess I changed it

#

export const Icons = () => findAll(filters.componentByCode(/color:[^,]+?,colorClass/)) as t.Icon[]; this was my find

image.png
formal frigate
#

findAllByCode("[\"size\",\"width\",\"height\",\"color\",\"colorClass\"]") works well. and I found a fix, just make it set to remove dups

final hinge
floral bone
#

lol read the message above yours

final hinge
#

😭

regal lion
floral bone
#

Yeah I was being lazy

formal frigate
formal frigate
#

pushed changes, enjoy and support by submitting patterns ty

candid tangle
#

One nitpick

formal frigate
candid tangle
formal frigate
#

cuz idk how

candid tangle
#

Probably with some CSS tomfoolery…

#

apply a custom class to that model then use that too fuck around

formal frigate
candid tangle
formal frigate
#

pushed changes

candid tangle
#

Looks amazing

#

Happy to see those plug-in back

formal frigate
#

ty

formal frigate
formal frigate
#

right click the color name in modal and that's it blobcatcozy

candid tangle
formal frigate
#

ik but for some reason I didn't maybe I just hated lint errors so much

#

doing that rn tho

candid tangle
#

you could also prolly do a // @ts-ignore

candid tangle
#

I just noticed the shout out:3

image.png
eager marten
#

fire

stark jewel
#

Just want to report that this plugin doesn't work when cloned


> vencord@1.12.9 build E:\Vencord\Vencord
> node --require=./scripts/suppressExperimentalWarnings.js scripts/build/build.mjs



  dist\dist\vencordDesktopPreload.js       preload.js       2.4kb2.3kb

  dist\dist\vencordDesktopPreload.js.mappreload.js.map  10.2kb

Done in 5ms
  10.1kb

Done in 5ms

  dist\patcher.js             55.0kb
  dist\patcher.js.LEGAL.txt    1.1kb
  dist\patcher.js.map        285.5kb

Done in 47ms
X [ERROR] Could not resolve "@components/VencordSettings/shared"

    src/userplugins/iconViewer/IconsTab.tsx:21:37:
      21 │ import { SettingsTab, wrapTab } from "@components/VencordSettings/shared";
         ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@components/VencordSettings/shared" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

X
  [dist\vencordDesktopMain.jsERROR             49.6kb]
   dist\Could not resolve "@components/VencordSettings/shared"

    src/userplugins/iconViewer/IconsTab.tsx:21:37:
vencordDesktopMain.js.LEGAL.txt      21 │ import { SettingsTab, wrapTab } from     "@components/VencordSettings/shared"1.1kb;
         ╵
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~dist\

  You can mark the path "@components/VencordSettings/shared" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

vencordDesktopMain.js.map        266.0kb

Done in 50ms
1 error
Build failed with 1 error:
src/userplugins/iconViewer/IconsTab.tsx:21:37: ERROR: Could not resolve "@components/VencordSettings/shared"
 ELIFECYCLE  Command failed with exit code 1.

E:\Vencord\Vencord>```
formal frigate
#

seems like there been an updated to vencord settings?
eh it been a half a year, I have so much irl and moved to other projects, hope this is an easy fix when I come to it

floral bone
#

I think you just need to import SettingsTab and wrapTab from @components/settings/tabs/BaseTab now

stark jewel
#

No problems mate, just wanted to notify

#

It's not urgent as i don't currelty need this plugin but i want to have it when i need it. Not hurry

formal frigate
formal frigate
#

t

brittle knoll
#

t

obsidian valley
#

a

willow abyss
#

Is your version more up to date with icons or anything?

obsidian valley
willow abyss
#

ah okay, i’ll use this one then

willow abyss
#

@formal frigate the plugin icon for the new settings design from Discord doesn't exist.

#

It's currently a square with a question mark in it.

formal frigate
willow abyss
formal frigate
#

tomorrow is not coming ig, there is a lot on my back. so someone remind me after 2 weeks

true portal
#

does this view all discord icons?

#

i was thinking of adding vencord devtools gated behind IS_DEV compile time flag (aka build from source to get)

we could integrate this code maybe

upper cave
formal frigate
formal frigate
#

I'm noticing that this plugin uses deprecated components (e.g Button, Text, etc), is there replacements or should I reimplement them from scratch

upper cave
#

use @components

brittle knoll
formal frigate
#

alrighty ty, I have updated locally, I will push when I do some factoring

formal frigate
#

refactored and updated blobcatcozy

#

enjoy

#

and made few fixes as well like copying not working and some css variables being outdated

formal frigate
#

I believe it could be refactored further

upper cave
formal frigate
formal frigate
#

new update

  • named/recovered 65+ icon names
  • unique find generator (can be flawed sometimes)
  • better looking ui (thanks to prism)
  • 60+ more icons (thanks to prism)
  • be able to hide code blocks through settings
formal frigate
#

there is lil icons left that either can't tell what they are or they can't have unique literal strings, help would be appreciated to figure them out

upper cave
#

can help later

formal frigate
#

-# hold lemme convert this properly

#

-# ignore the bg sound, I think I was in a voice chat

true portal
#

how

#

did you just use old non mangled sources to map

formal frigate
#

-# I never close my discord tab lmao

#

Ob you were asking a no/y question, yes

#

I only took the names tho

upper cave
#

@formal frigate

formal frigate
#

that's lovely 🥹

#

I will be back, could you pr it if you didn't already

upper cave
#

will do soon

upper cave
#

did

#

i removed the unnamed icons

#

they just bloat anyway

compact moon
#

Couldnt you keep an option to show unnamed icons

candid tangle
#

Like don’t just remove them all together

#

At least give people the option to use them

upper cave
#

ill cook later

upper cave
#

im using only their icon module and this is the best practice tbh

wicked oar
#

i am chatting here to download later when vencord is fixed

eternal field
#

bro

#

@formal frigate update

formal frigate
eternal field
#

the icon finder

formal frigate
#

show screenshot

eternal field
formal frigate
#

throw it in dms

eternal field
formal frigate
#

iamm check

eternal field
#

do i have to do pnpm

#

inject

formal frigate
#

lol

#

ye ofc

#

you must build it as well

#

also from the look of it, there is no issues

eternal field
#

Ok

formal frigate
#

you must update your vencord build and/or build & inject it properly

eternal field
formal frigate
eternal field
#

it works

#

thanks bro

#

🫡

eternal field
#

@formal frigate HAVING trouble downloading the icons

#

svg is the onyl format

#

that allows me to download

formal frigate
upper cave
#

svg to png

eternal field
#

When I export the icon as svg

#

In my folder the svg is just blank

#

Like once I export the icon just doesn’t show in the file

formal frigate