Twenty Seventeen SVG 50 icon

とりあえず「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>があるならインラインで書けばよろしいとこの記事も復活させてみました。


icon-twitter

icon-github

icon-bars

icon-close

icon-arrow-left

icon-arrow-right

icon-quote-right

icon-angle-down

icon-wordpress

icon-search

icon-pinterest-p

icon-google-plus

icon-facebook

icon-folder-open

icon-get-pocket

icon-vimeo

icon-codepen

icon-tumblr

icon-instagram

icon-behance

icon-deviantart

icon-slideshare

icon-snapchat-ghost

icon-yelp

icon-vine

icon-vk

icon-linkedin

icon-mail-reply

icon-youtube

icon-dropbox

icon-skype

icon-dribbble

icon-flickr

icon-foursquare

icon-digg

icon-spotify

icon-soundcloud

icon-twitch

icon-meanpath

icon-periscope

icon-reddit-alien

icon-hashtag

icon-chain

icon-play

icon-pause

icon-medium

icon-envelope-o

icon-dockerhub

icon-stumbleupon

icon-thumb-tack


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