Twenty Seventeen SVG 50 icon

<svg class="icon-twitter" aria-hidden="true" role="img"> <use href="#icon-twitter" xlink:href="#icon-twitter"></use> </svg>

サンプルコードは、デフォルトテーマのSingleページにあった「カテゴリ」や「タグ」マークとして表示されていたのを参考に

<svg class=“icon icon-twitter”>
から
<svg class=“icon-twitter”>

「.icon」classを外すと実寸大表示になりました。

「.icon-twitter」等はSVGファイルにあるsymbol idをそのまま充てているだけで、特にスタイルがあるわけではないので、独自スタイルをつくるときに名称として使っても問題はなさそう。

SNSアイコンはほぼ網羅しているのと、ハンバーガーメニュー[ bars ]や左右矢印[arrow-left/arrow-right]などサイトデザインに欠かせないものはとりあえず揃っている。
というか、実際にテーマの中で使っているのかも?

あ。左右矢印はPagerで出てきた。Singleページ内でもPREV|NEXTボタンとして使われていましたね。

少し気になったのが
[angle-down] [quote-right]

これは左右矢印のように「対」はありません。
先に矢印を見ていたので、引用マークも当然 [quote-left] があるかと思いきや、なかった。

でもまぁこういう汎用記号こそCSSの反転・回転の出番なので

transform: rotate(angle);
transform: scaleX(sx);
transform: scaleY(sy);

で対応できます。

スタイルなしで羅列するなんて、こんな記事くらいでしか無いことなので、四辺ものは1つあれば事足りるんだよなぁ・・・と思いつつ。
矢印だけ左右揃っていたのは、本当に「ソーシャルアイコン」+テーマデザインで必要だったもの。というセットなのかもー。