Integration with github-icons.com

[samdenty]

Hi there 👋

I'm the creator of https://github-icons.com / https://github.com/samdenty/github-icons.

We provide a free-to-use API to retrieve icons for NPM packages. I think it'd be pretty cool if you integrated it with this project

The API is as simple as loading an image tag with

https://github-icons.com/npm/PACKAGE_NAME

for example https://github-icons.com/npm/react

This image can return a 404 if no icon is found. It can also take a while waiting for the GitHub API (second time is always instant), so on https://github-icons.com I do the following.

1. Render the <img> tag with opacity: 0, and object-fit: contain (so it retains aspect ratio)
2. Render a loading animation in the place of the icon, with position absolute
3. Attach an onLoad handler to the image, which removes the loading animation and unhides the icon
4. Attach an onError handler to the image which updates the src to either a generic npm logo or not found icon

[Idered]

Hey @samdenty, sorry for late response 😅

Here are a few problems I see:

• showing author face
• size consistency
• blurry/pixelated icons
• eslint logo has white background

Overall I like your project but I think that results are not refined enough.

I consider creating more robust solution powered by community suggestions

---

[samdenty]

Yeah some icons could do with custom picked ones instead. I was testing the water as I hadn't seen any project that scraped github repo icons automatically before and thought it would be a good idea. Scraping has worked pretty well because if you search on github-icons.com for a repo / package, you're bound to find something related.

It's got some users now around 700 daily, but i'd like to see it grow.

Maybe I should add a curating / icon suggestion thing, instead of relying on package authors to manually set the "icon": "./icon.png" field in package json to use custom icons. I was picking between both ideas and thought it could be nicer to have a standard, but i guess some repos will never accept new contributions.

Regarding showing the user avatar on NPM icons, I did that as that's what github does on repos. I prioritise organization avatars over user ones, but maybe I should not display user ones at all when on an NPM package. Curious on your thoughts