【あまりにもよく使う右向きアイコンのSVG】chevron（シェブロン）のsvgコードをワンコードで使い回す方法

タイトルにも記載した通り、

よくよく見回すすと、このアイコンを実によく見かけると思う。

参考) bootstrap opensource icons

その名は”chevron”（シェブロン）

このアイコン、名称をchevron（シェブロン）といい、

上向き、右向き、左向き、下向き、またそれらの二重線バージョン、太いバージョン、細いバージョン、など、パターンは本当に様々で、

右向きは主にリンクをするさいに使われ、下向きはアコーディオンメニューの開閉のボタンにも使われることが多い。

インラインテキストの前か後ろにつくこともあれば、

ボタンの中に配置されることもある。

このように＞(文字で打てる”大なり”)で済ませていることもあるが、chevronを使っていないとなんとなく野暮ったい&素人くさいと個人的には思う。

( といっても上記スクショの例は、Shopify Plusプランの事例としてもよく紹介される”タンスのゲン”だが、ここほどの大規模ECでも意外と、、)

このアイコンがサイト内で、使われる箇所によって前つきだったり後ろつきだったり、色・大きさも使われる場所によって、

本当に様々なパターンで表示してくる。

毎回XDからsvgまたはpngを書き出し、または素材集のサイトでsvgまたはpngをダウンロードしていたが、

あまりにも同じことを繰り返しているので、効率が悪いと気づき、以下のコードの一部を変更すれば

• 色
• サイズ
• 向き
• アイコンの位置( 前つき or 後ろつき )

を変更することができるようにできた！

同じ作業を毎回ゼロからやろうが、すでにコードの引き出しがあってそれを使用しようが、最終系が同じなら、工数がかからないほうが絶対にいい。

“車輪を再発明するな”とはこういうことを表した格言だと思う。

ぜひ使用してください。

See the Pen Untitled by Naoto Yoshikawa (@nanaironanaoto) on CodePen.

追記：照会したchevronの線が細いバージョンしかなかったので、太いバージョンのコードを公開します。

See the Pen chevron-right-bold by Naoto Yoshikawa (@nanaironanaoto) on CodePen.