概要 †

公式で SVGのアイコンが提供されているが、一覧を見ながら使うものを選びたいので簡単なシェルを作成した。

↑

目次 †

↑

アイコンデータ取得 †

公式で提供されているアイコンデータ(SVG)をダウンロードする。
https://docs.microsoft.com/en-us/azure/architecture/icons/

↑

一覧HTML作成 †

list_svg.sh

#!/bin/bash


find . -name *.svg | sort | awk -F, '
BEGIN{
  no = 0;
  preGroup="";
  print "<!doctype html>";
  print "<html>";
  print "<style>";
  print ".title { font-size: 16px; }";
  print ".body { margin: 10px; }"
  print ".img { width: 50px; height: 50px; margin: 10px; display: inline-block; }";
  print ".img img { width: 100%;}";
  print "table { border-collapse: collapse; }"
  print "th,td { border: 1px solid #333; }"
  print "</style>";
  print "<div>";
  info = "<table>";
}
{
  no = no + 1;
  group=substr($1,3,100);
  gsub("/.+", "", group);
  if (group != preGroup) {
    preGroup = group;
    print "</div>";
    print "<div class=\"title\">"group"</div>";
    print "<div class=\"body\">";
  }
  info = info"<tr><th>"no"</th><td>"$1"</td></tr>"
  print "<div class=\"img\"><div>"no"</div><img src=\""$1"\" title=\""$1"\"></div>";
}
END {
  info = info"</table>"
  print "</div>";
  print "<div>"info"</div>";
  print "</html>"
}'

実行

bash list_svg.sh > index.html
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-07-30 (木) 18:27:11 (1505d)