game-icons / icons

All SVG icons available on https://game-icons.net
Other
1.11k stars 123 forks source link

[[site]] Add random colors preview for tag pages #915

Open waterstopper opened 2 years ago

waterstopper commented 2 years ago

Main page contains a section with popular icons with random colors. image

Maybe add something like a toggle button to add/remove random colors on tag pages, like, for instance building tag?

aloisdg commented 2 years ago

I think the goal of this section is to get a quick preview of the color possibilities of those icons. I have some fear that more editions may clutter the front page for no that much to gain for a quick preview. How would you insert this toggle button on the page? Could you draw it?

waterstopper commented 2 years ago

I meant changing tag pages, like https://game-icons.net/tags/head.html. Maybe add a simple toggle next to the game-icons.net button to randomize colors of icons on that tag page image

aloisdg commented 2 years ago

Alright I think I get what you want. I fill the background instead of the subject but hey...

image

const randomColor =  () =>
    '#'+(0x1000000+Math.random()*0xffffff).toString(16).substr(1,6);

const replaceImage = img => fetch(img.src)
    .then(x => x.text())
    .then(x => {
        img.parentElement.style.fill = randomColor();
        img.parentElement.innerHTML = x;
    })

document
.querySelectorAll(".icons img")
.forEach(img => setTimeout(() => replaceImage(img), 1000));

The original logic seems to use solarized