A question from a new user: how to use it?

[OnkelTem]

Hi!

I need to add a simple npmjs badge for my project in the README.md, like this one:

But after 30 minutes of seeking I'm about to beat my head against the wall to figure out how to use https://shields.io/

1. The search on https://shields.io/ doesn't find any of my projects. So I cannot see which icons are available.
2. I don't see the "Npm" category in this list:
   
   So I can't understand how the authors of the above mentioned badge got it.
3. I cannot find also a way to ask https://shields.io/ to look up for my project and return the badge.

Could you please provide any clue?

[calebcartwright]

Shields is, in many ways, a provider of static content in the form of badges (typically svgs). These badges are served up at https://img.shields.io/route/to/badge/and/parameters, such as the static https://img.shields.io/badge/foo-bar-blue

The Shields.io website is simply a catalog or library of the types of badges that we provide. The website does not mention your specific projects, nor my projects, nor anyone else's projects, but it simply lists the types of badges that are available, and the site also provides a tool that help users construct their corresponding badge url for their projects/packages/etc..

We provide quite a lot of different types of badges, so they are grouped into categories. Please note that a category is different from a specific badge, for example, we have a build service category that contains badges for services related to builds/pipelines and you can view those by clicking the "Build" category link, or by navigating directly there: https://shields.io/category/build, and there's badges for many build/pipeline tools like AppVeyor, CircleCI, TravisCI, and more (these are the actual badges)

We also have a search box at the type of the page, where you can use keywords to try to find a particular type of badge. The types of things you should be searching for are terms like "github" or "npm" however, not the specific name of your GitHub repo or npm package as Shields.io does not have any insight into the full set of names of packages uploaded to the npm registry, every repository on GitHub, etc.

If you search for "npm" in the search box, you will see the available badges that are related to npm:

In either case (search or navigate), these pages show you the specific badges that are available, including the routes. You can click on any one of them to open up a dialog which we call the badge builder window, and the screenshot shows the badge builder window for the npm version badge which seems to be what you'd like to use:

Here, you enter the relevant parameters, in this case the name of the desired package on the npm registry. I'll use one of our packages, badge-maker for an example. Once all required parameters have been provided, the window will show you a preview of your badge and you can use the "Copy Badge URL" button to get the corresponding url for the specific badge

This produces the following:
https://img.shields.io/npm/v/badge-maker

Which is the same pattern you would want to use, but you'd replace our package name badge-maker with the name of your package