#mynavi(Azureメモ) #setlinebreak(); * 概要 [#j36ce3c4] #html(<div class="pl10">) 公式で SVGのアイコンが提供されているが、一覧を見ながら使うものを選びたいので簡単なシェルを作成した。 #html(</div>) * 目次 [#y0b0bc58] #contents - 関連 -- [[Azureメモ]] * アイコンデータ取得 [#r49c1f7c] #html(<div class="pl10">) 公式で提供されているアイコンデータ(SVG)をダウンロードする。 https://docs.microsoft.com/en-us/azure/architecture/icons/ #html(</div>) * 一覧HTML作成 [#k850c9bd] #html(<div class="pl10">) list_svg.sh #mycode2{{ #!/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>" }' }} 実行 #myterm2(){{ bash list_svg.sh > index.html }} #html(</div>)