🐷

急遽アイコンが必要になった時にその場をしのぐ

2023/08/29に公開

HTML

JavaScript

tech

急遽アイコンが必要になること、よくありますよね！そういう時にとりあえず仮で良いのでそれっぽいアイコンを取り繕いたい時に、絵文字を使ってアイコンを用意してPNGファイルを生成できるHTMLを用意しました。

icon.html

icon.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>icon</title>
    <script
      src="https://html2canvas.hertzen.com/dist/html2canvas.js"
      type="text/javascript"
    ></script>
  </head>
  <body style="text-align: center">
    <table style="margin: 0 auto">
      <thead>
        <tr>
          <th>
            <div
              id="icon128"
              style="
                margin: 0 auto;
                width: 128px;
                height: 128px;
                background-color: rgb(211, 224, 224);
                text-align: center;
                line-height: 128px;
                border-radius: 24px;
              "
            >
              <p style="margin: 0; font-size: 80px">🍁</p>
            </div>
          </th>
          <th>
            <div
              id="icon48"
              style="
                margin: 0 auto;
                width: 48px;
                height: 48px;
                background-color: rgb(211, 224, 224);
                text-align: center;
                line-height: 48px;
                border-radius: 9px;
              "
            >
              <p style="margin: 0; font-size: 30px">🍁</p>
            </div>
          </th>
          <th>
            <div
              id="icon16"
              style="
                margin: 0 auto;
                width: 16px;
                height: 16px;
                background-color: rgb(211, 224, 224);
                text-align: center;
                line-height: 16px;
                border-radius: 3px;
              "
            >
              <p style="margin: 0; font-size: 10px">🍁</p>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td width="140px">
            <a id="downloadIcon128">ダウンロード</a>
          </td>
          <td width="140px">
            <a id="downloadIcon48">ダウンロード</a>
          </td>
          <td width="140px">
            <a id="downloadIcon16">ダウンロード</a>
          </td>
        </tr>
      </tbody>
    </table>
    <script type="text/javascript">
      window.onload = function () {
        html2canvas(document.querySelector("#icon128"), {backgroundColor:null}).then((canvas) => {
          const link = document.getElementById("downloadIcon128");
          link.href = canvas.toDataURL("image/png");
          link.download = "icon_128.png";
        });

        html2canvas(document.querySelector("#icon48"), {backgroundColor:null}).then((canvas) => {
          const link = document.getElementById("downloadIcon48");
          link.href = canvas.toDataURL("image/png");
          link.download = "icon_48.png";
        });

        html2canvas(document.querySelector("#icon16"), {backgroundColor:null}).then((canvas) => {
          const link = document.getElementById("downloadIcon16");
          link.href = canvas.toDataURL("image/png");
          link.download = "icon_16.png";
        });
      };
    </script>
  </body>
</html>

カスタマイズ方法

<p>タグの中の絵文字を好きなものに変更
style=""の中をいい感じに編集
　　- background-colorやborder-radiusとか

カスタマイズ方法

Discussion