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つあれば事足りるんだよなぁ・・・と思いつつ。
矢印だけ左右揃っていたのは、本当に「ソーシャルアイコン」＋テーマデザインで必要だったもの。というセットなのかもー。