Making a Dashboard Icons website

[lammersbjorn]

I am looking into building a nice looking website for the Dashboard Icons project.

Here are some feature's I am wanting to add:

• Fuzzy search
• PNG/SVG filtering
• If both an SVG and PNG is present, show only the PNG version but show both on click
• Lazy loading

If anyone would want to help me with this, please comment on this issue and I will assign you. If you have any suggestions, please also make a comment!

[ryuupendragon]

I think website can be made similar to the aegis-icons. https://aegis-icons.github.io/, https://github.com/aegis-icons/aegis-icons

[lammersbjorn]

I think website can be made similar to the aegis-icons. aegis-icons.github.io, aegis-icons/aegis-icons

Thanks for the links! I'll see if I can find some inspiration.

[pradt]

Hi, I've generated an example if this is what you are looking for (it'll need better styling) :

https://jsfiddle.net/prad/jk3tc2fs/3/

I've used the following to convert the html to have a text label and be within a list tag : https://jsfiddle.net/prad/cne0dk6z/9/

[lammersbjorn]

I think this is a really great start, but the fuzzy search will have to be improved loads more. For example, currently when searching "pihole", "pi-hole" will not show up. I am going on vacation in a couple of days but I will take a better look at your example when I'm back :)

[Mega-Volti]

Why prefer the png version, if both svg and png are available? As vector format, the svg version offers better scalability so it should be the default / preferred one, right?

[pradt]

I think this is a really great start, but the fuzzy search will have to be improved loads more. For example, currently when searching "pihole", "pi-hole" will not show up. I am going on vacation in a couple of days but I will take a better look at your example when I'm back :)

Ok no worries, enjoy your holidays.

Based on your feedback, writing a custom fuzzy logic function is probably going to take some time. Instead I've looked at two libraries (fuse.js and fuzzysort) and I was able to get better success from using the fuzzysort library : https://github.com/farzher/fuzzysort

I've created a working example, but I've had to convert the content to an array. But for testing purposes the update at https://jsfiddle.net/prad/jk3tc2fs/52/ (the initial display of all the icons is not shown at this stage, only after it passes the array of the icons to the fuzzy search it displays the result.

[lammersbjorn]

This is an absolutely great start! I think it still needs some optimizations, but this is superb.

[raythunder]

I have created a simple search page. It can be temporarily used by those who need it. https://raythunder.github.io/dashboard-icons-search/

[lammersbjorn]

This is really nice! I'm going to take a further look at it once I find some time, I think after some improvements we could really use this.

[andrzej-zuralovic]

The icon searcher should always be up to date as it requests PNG and SVG content from GitHub. https://andrzej-zuralovic.github.io/dashboard-icons-searcher/

[lammersbjorn]

Hi @andrzej-zuralovic, this looks fantastic! I’d love to integrate it into the repository if you’re okay with that.

I did notice a couple of bugs:

1. Images wider than 512px aren’t scaling properly.
2. Icons with longer names display oddly on hover.

[andrzej-zuralovic]

Hi @walkxcode , apologies for the delayed response. Yes, you can integrate it if you wish. I have also addressed the bugs you mentioned.

[lammersbjorn]

https://dashboardicons.com :) #1157