Developer

リンクとして、使用する

ほとんどの場合は、名前のスペースの部分にハイフン(-)を入れることで取得することができます。

リンクの構成としては、"https://icon-master.com/media/" + "名前" + ".svg" で構成されています。

After the rain → After-the-rain

下記が、サンプルコードになります。

1つ目は、直リンクを使用します。そのため、内部的に処理を挟んでいないため2つ目のサンプルコードと比べると高速に表示されます。

<img src="https://icon-master.com/media/After-the-rain.svg" />

<img src="https://icon-master.com/i/After-the-rain/000000" />

svgのカラーを変更する(css)

<div class="_icon_maeter"></div>

._icon_maeter {
  width: 48px;
  height: 48px;
  background-color: red;
  -webkit-mask: url(https://icon-master.com/media/After-the-rain.svg) no-repeat center;
  mask: url(https://icon-master.com/media/After-the-rain.svg) no-repeat center;
}

CORSがconsoleに表示される場合は、ダウンロードを行なってください。

また、デフォルトではサイズが48pxに指定されている点にも注意が必要です。48px以外にも使用したい場合は、ダウンロードを行なってください。

リンクでカラーを選択する

"https://icon-master.com/i/" + "名前" + "/16進数" で変更することができます。

下記が、サンプルコードになります。

<object style="width: 48px; height: 48px" data="https://icon-master.com/i/After-the-rain/000000?type=string" />
<object style="width: 48px; height: 48px" data="https://icon-master.com/i/After-the-rain/F00?type=string" />

文字列で取得する(サーバーのみ)

"query"を設定することも可能です。"type=base64" or "type=base64url"

下記が、サンプルコードになります。

const str = await fetch("https://icon-master.com/i/After-the-rain/000000")

console.log(str)
// <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" ...

base64

const base64 = await fetch("https://icon-master.com/i/After-the-rain/000000?type=base64")

console.log(base64)
// PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v...