モナコインのアイコンを作った

PNGmona-circle-black.pngmona-line-black.pngmona-mark-black-line.pngmona-mark-black.pngmonacoin-face-mouth-red.pngmonacoin-face-mouth-white.pngmonacoin-mouth-red.pngmonacoin-mouth-white.pngmonar-mark-gold.pngmonar-mark.pngmonar-mouth-red.pngmonar-mouth-white.pngmonar-no-face.pngmonar-outline-transparent.png
2.6 KB3.7 KB3.5 KB2.1 KB5 KB4.8 KB7.1 KB6.9 KB3.7 KB3.9 KB3.4 KB3.3 KB2.7 KB3.3 KB
SVG
1.9 KB2.6 KB1.5 KB968 B5.3 KB5.2 KB7.4 KB7.3 KB4.6 KB3.4 KB3.1 KB2.8 KB2.4 KB2.4 KB
明暗

ZIP inkscape編集用

目的

 そのためには次のことを満たす必要があると考えました。

目標

ライセンス

 CC0です。ここにある画像はDMD様の素材を元にが改変したものです。

技術

light/darkモード

 SVGには明暗モードに対応しているものがあります。OSのlight/darkモードに応じて色が変化します。

 Chromeブラウザではこれをテストできます。その手順は以下の通りです。

  1. デベロッパツールを開く(Ctrl+Shift+I
  2. デベロッパツール右上⚙⋮❌のうちをクリックする
  3. More toolsRenderingをクリックする
  4. デベロッパツール下にあるRenderingタブをクリックする
  5. Emurate CSS media feature prefers-color-shcemeの所までスクロールする
  6. その下にあるコンボボックスからテストしたいカラースキームを選ぶ
    • prefers-color-shceme: light
    • prefers-color-shceme: dark
  7. SVGがその状態に応じた色になる

SVG

light/dark + フォールバック

 SVGは<img>で表示すると内部のスタイルが適用されず、light/darkモードが適用されない。そこで<object>を使うと解決する。<object>でPNGにフォールバックするにはネストする。以下のように。

<object data="some.svg" 
        type="image/svg+xml" 
        width="64" 
        height="64">
        <object data="some.png" 
                type="image/png" 
                width="64" 
                height="64">
        </object>
</object>

light/dark + フォールバック + リンク

 リンクやボタンにするには上記を<a>で囲む。

<a href="#"><object data="some.svg" ... </object></a>

 だがこれはクリックできない。そこで以下CSSを追加する。

a {
    display: inline-block;
}
object {
    pointer-events: none;
}

 情報源は以下。

投げモナ

 Mpurse API で投げモナするときは以下。

await window.mpurse.sendAsset(
  'MEHCqJbgiNERCH3bRAtNSSD9uxPViEX1nu', 
  'MONA', 
  0.114114, 
  'plain', 
  'Good job!')

 これを<a>の中に入れる。

<a href="javascript:/*await*/ window.mpurse.sendAsset('MEHCqJbgiNERCH3bRAtNSSD9uxPViEX1nu', 'MONA', 0.114114, 'plain', 'Good job!')" title="投げモナする">
<object ...></object>
</a>

支援

 どれでも好きなのをクリックしてみてください。私に投げモナするか確認画面が出ます。ご支援くださると嬉しいです。

 この投げモナボタンにはMpurseを使用しています。簡単なので試してみませんか? ( ´∀`) <オマエモナー