とりあえず「TwentySeventeen」テーマに用意されていたSVGスプライトの内訳書き出してみた。

まともな記事は後日。

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

と思ったが簡単に本日書き。（・・・をしたのは、2018/3/3の投稿時）

---

「Twenty Seventeen」テーマについていたSVGなので、テーマを変更した時点で、この記事の50個のアイコンは消え失せてました。

それはそうですよね、テーマテンプレートの<footer>直前に50の<symbol>タグで書かれていて、それを上のような<use>コードで表示させていたのが「Twenty Seventeen」テーマの使い方でした。

で、今回「Twenty Twenty One」テーマを触っていてSVGアイコンが欲しかった時に思い出し、<path>があるならインラインで書けばよろしいとこの記事も復活させてみました。

---

---

いやでも、SVGアイコンまったく用意してないとか、あるかなぁ・・・とこの記事を書き足しながら思いつき、FTPで親テーマフォルダ「Twenty Twenty One」を確認したところ、ありましたねー。『classes/class-twenty-twenty-one-svg-icons.php』

---

これ以降は最初の投稿時のラストページ。

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