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