Safehou-se (Pt 7)

HomeBlog


Finally tackling having icon selection menus aka my long battle with Font Awesome's... interesting API service.

Issues with the Font Awesome API

The first and biggest issue is that their API has a search query that is non-nullable. Additionally, entering an empty string does not return all of their icons.

Here is the GraphQL query I wrote:

query {
  search(version: "6.0.0", query: "", first: 19403) {
    id,
    familyStylesByLicense {
      pro {
        family,
        style
      }
    }
  }
}

According to their docs, they should have 19403 icons (this includes icons that have different versions: i.e. solid, regular, lined). After counting strenuously, I found they currently have 3500 different icons (if you cound fas fa-cat and far fa-cat as the same icon). Either way, 19403 should capture all of them.

Instead, I ended up getting 1598 icons.

Unupdated JSON Metadata

Ok... so that didn't work. Second attempt: I went to their github and found a metadata folder with icons.json. This had a few more icons than querying their API... but still fell short at 1854.

ALMOST All of Them...?

Finally, I found _variables.scss, which, after some file manipulation, surmounted to 2451 icons. Now, I still have no idea where the last 1000 or so icons have disappeared to, but this is probably the best I can do for now.

What followed was perhaps one of the most cursed programs I've ever written.

First, I had to parse _variables.scss to get all of the icon names. Then, for each one, I had to query the API to see what versions there were (i.e. fas, far, fal, fab, etc.). Then I had to chain them all together. Truly horrible.

Even after all that... I was still missing several commonly used ones.

Maybe All Of Them?

I also wrote a similar data-scraper for the CSS file I got from the FontAwesome site. This should contain all the icons... I just chose to do _variables.scss first since I was hoping it would have enough. It was also less organized, so I had to do a regex finder, then clean the found matches, and then paste all of them into an unholy document.

You can check out the repl.it link to scraping the CSS file and then changing everything to be compatible here.

Some data:

I found 4685 unique icons (which is funny because there should be only 3500). There were 16966 total icons (which is a bit less than 19403... although I did omit sharp icons as Toyhouse does not have them yet). I am at a level 18 despair.