Iconfinder 是一個提供免費跟付費的 icon 的平台，可以選擇不同檔案格式的 icon 跟下載同作者的 icon set，還可以上傳自己做的 icon 給他人使用或購買，是個相當好用的資源。

使用 Iconfinder API 的話，可以取得裡面所有的免費 icon，如果想要使用付費的 icon 的話，就必須使用付費的 API。關於付費的 API 可以在上圖 Getting Started 裡找到。
要注意的是，即使可以取得所有的免費 icon，需不需要註明作者或可不可以商用，都還是依照個別 icon 的授權而定，不能隨便使用。

現在來申請一個帳號：

申請完帳號當然是創建一個 Application，然後拿到 Client Id 跟 Client Secret。

然後就可以來看文件了～

Overview 那邊都先跳過，有需要再回來看。
來看看Authentication 要怎麼做。

Iconfinder API 有分成 Public 的跟 Private 的。如果使用 Public 的話，使用者能夠使用的功能就跟在未登入的時候使用圖像介面化的 Iconfinder 服務一樣，Private 得到了其他使用者的授權能夠做的操作則是多許多。

文件裡的 Authentication 寫的都是 private 的做法，也就是 OAuth。而 public 的做法，雖然沒有在特定地方寫明，（經過我一番亂試浪費許多時間之後 ˊ_>ˋ）其實就是在 request URL 上將 Client ID 跟 Client Secret 當作參數放入。

而使用 Iconfinder 可以取得的資源，有:

• categories：icon 的分類
• authors：icon 創作者
• users：平台使用者
• icons：iconfinder 上的 icon
• icon sets：同個作者發表的 icon 套組叫做 icon set，比方說教育 APP 的 icon 組合
• licenses：不同授權資料
• styles：icon 的風格

所有 API 的 base URL 都是 https://api.iconfinder.com/v3/。

現在就來使用 Iconfinder 的 Search 功能來實作。

使用 Search endpoint 來搜尋 Iconfinder 的 icon 資料庫，必須放入的參數只有

• query：搜尋關鍵字

可選的參數有：

• count：回傳結果的數量

• offset：回傳結果的起始點

• premium：all 或沒有輸入此參數，回傳所有 icon

• 0 or false ，只回傳免費 icon，但依然可能需要購買某種 license

• 1 or true ，只回傳付費 icon

• vector：

  • all 或沒有輸入此參數，回傳所有 icon
  • 0 or false ，只回傳點陣 icon
  • 1 or true，只回傳向量 icon

• license：

  • none 或沒有輸入此參數，會回傳所有 icon 不管 license 的授權如何
  • commercial 回傳可商用的icon，但依 icon 而異可能需要註明作者跟授權
  • commercial-nonattribution回傳可商用又不需要註明作者跟授權的 icon

• category：icon 的分類

  var url = "https://api.iconfinder.com/v3/icons/search?query=cat&coun=30&client_id=7MpE7ptXq0cYWNcRP8nsBFY5fSqjNbUuWMVDm5cthx97VPF4Tz1bNo39VS95iIRD&client_secret=GpUgS5utkjnVQUFdqWnuUqk6Yf3xcbPtlWEAcYSTvZbICfmqWBuoLxIC6UL3ijAW&premium=false"

  var xhr = new XMLHttpRequest();
  xhr.addEventListener("readystatechange", function () {
  if (this.readyState === 4) {
  var response = JSON.parse(this.responseText);
  console.log(response);
  }
  });

  xhr.open("GET", url);
  xhr.setRequestHeader("Cache-Control", "no-cache");

  xhr.send();

結果:

Codepen 連結