FontAwesomeのinstagramアイコンが「なんか違う」ので強引にSVG修正した話
はじめに
「アイコンにFontAwesomeを使う」と指定されている。
「でもなんかアイコンの形状が違う・・」
どうでもいい話のようですが、もやもやと心に引っ掛かる。
そんな問題にぶち当たった時
「アイコンのSVGはコードで修正できるので試してみましょう」という話です。
デイトラの自由課題にて
「SNSアイコンのリンク」
というのがありました。
twitter、instagram、tiktokと並んでいます。
「各アイコンはFont Awesomeを使ってください！」
との事で、コードを探しました。
tiktok
つつ fa-instagram-square
このinsta、なんかちがう。
枠がなくて、塗りつぶされてるヤツどこ？
──それが見つかる事はなかった
あの、これ・・
そういう問題なんですね
分かります( 脳筋 )
冷静に考えてすべき対応
「FontAwesomeを使う」「テキストで問題ない」という指定ですが、ないものはナイです。
「なかったのでこれでいいですか？」「画像でよいですか？」と、聞くのが賢明でしょう。
ですが画像の場合、ホバー時の白黒反転演出が困難です。
残った方法として、SVGに辿り着きます。
カンプに描かれてるsvgコードを拾ってくる
figmaで作られていますので、instaのアイコンを選択してExport→SVG。ダウンロードしたsvgファイルの中身をコピペします。
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.4434 17.8428C23.4434 18.9503 23.115 20.0329 22.4997 20.9538C21.8844 21.8746 21.0099 22.5923 19.9867 23.0162C18.9635 23.44 17.8376 23.5509 16.7514 23.3348C15.6652 23.1187 14.6674 22.5854 13.8843 21.8023C13.1012 21.0192 12.5679 20.0215 12.3519 18.9353C12.1358 17.8491 12.2467 16.7232 12.6705 15.7C13.0943 14.6768 13.812 13.8023 14.7329 13.187C15.6537 12.5717 16.7363 12.2433 17.8438 12.2433C19.3284 12.245 20.7517 12.8355 21.8014 13.8853C22.8512 14.935 23.4417 16.3583 23.4434 17.8428ZM35.3424 10.1435V25.5422C35.3395 28.1402 34.3061 30.631 32.469 32.468C30.632 34.3051 28.1412 35.3385 25.5432 35.3414H10.1444C7.54643 35.3385 5.05568 34.3051 3.21861 32.468C1.38155 30.631 0.348179 28.1402 0.345215 25.5422V10.1435C0.348179 7.54545 1.38155 5.0547 3.21861 3.21764C5.05568 1.38057 7.54643 0.347202 10.1444 0.344238H25.5432C28.1412 0.347202 30.632 1.38057 32.469 3.21764C34.3061 5.0547 35.3395 7.54545 35.3424 10.1435V10.1435ZM26.2431 17.8428C26.2431 16.1816 25.7505 14.5577 24.8276 13.1764C23.9047 11.7952 22.5929 10
.7186 21.0581 10.0829C19.5233 9.44715 17.8345 9.28081 16.2052 9.6049C14.5759 9.92899 13.0793 10.729 11.9046 11.9036C10.7299 13.0783 9.92997 14.5749 9.60588 16.2042C9.28179 17.8335 9.44812 19.5223 10.0838 21.0571C10.7196 22.5919 11.7961 23.9037 13.1774 24.8266C14.5587 25.7496 16.1826 26.2422 17.8438 26.2422C20.0707 26.2397 22.2056 25.3539 23.7803 23.7793C25.3549 22.2047 26.2406 20.0697 26.2431 17.8428V17.8428ZM29.0429 8.74357C29.0429 8.32826 28.9198 7.92228 28.689 7.57696C28.4583 7.23165 28.1304 6.96251 27.7467 6.80358C27.363 6.64464 26.9408 6.60306 26.5334 6.68408C26.1261 6.7651 25.752 6.96509 25.4583 7.25876C25.1646 7.55243 24.9646 7.92658 24.8836 8.33391C24.8026 8.74124 24.8442 9.16344 25.0031 9.54714C25.162 9.93083 25.4312 10.2588 25.7765 10.4895C26.1218 10.7202 26.5278 10.8434 26.9431 10.8434C27.5 10.8434 28.0341 10.6222 28.4279 10.2284C28.8217 9.83458 29.0429 9.30048 29.0429 8.74357Z" fill="#2F2F2F"/>
</svg>なんでや真っ暗やん！！
コンソールがエラー吐いている。figmaで見えている絵と出力されるsvgは違うのか・・
Font AwesomeのSVGを修正する
最初に貼ったコードをよく見ると
fa-instagram-squareinstagram-squareの周りの黒枠がなくなれば大体同じに見えます。
わずかにバランスが違うのは目を瞑ります。
Font Awesomeは文字コードでアイコンを表示していますが、その実態はSVGです。SVGを修正してイメージに近づける方法に挑みます。
そういう訳で、まずinstagram-squareのSVGコードを取りに行きます。
Font Awesomeからinstagram-squareのSVGをダウンロード
Instagram Square Icon | Font Awesome
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
<path d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z"/></svg>コードに直接svgを張る
まず直接貼った場合
結果は<i class="fab fa-instagram-square"></i>と同じですね。
svgの内容を分離する
svgは一見呪文のようですが、ちゃんと書式があります。
アイコンは複数の線の描画命令から成り立っています。
path d=""の中が線の描画命令
mまたはMがmove、線の始まり
zまたはZがパスを閉じる命令です。
つまり、MからZの間が一つのつながった線です。
それを踏まえて再度SVGを見ると
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) -->
<path d="
M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Z
m124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67Z
M224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Z
m85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74Z
M400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32Z
M382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z
"/></svg>6回MとZが出現します。6個の線の描画があるという事です。
修正はあっさり成功した
試しに6個目・最後のパスを消してみます。
5個目のパスも消してみます。
枠が消えました。答えとしてはこれで十分です。
1行ずつ確認してみる
折角なのでもう少しいじってみましょう。
6行がそれぞれ何をしているのか確認
パス1行目
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Z"/></svg>2行目
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="m124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67Z"/></svg>Sが二次ベジェ曲線、Cが三次ベジェ曲線だそうです。しかし、そこまで分析する必要はなく「ふーん・・」ぐらいでいいでしょう。aはarc、円弧とのこと。
パス - SVG: スケーラブルベクターグラフィック | MDN
3行目
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Z"/></svg>4行目
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="m85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74Z"/></svg>5行目
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32Z"/></svg>6行目
<svg width="36" height="36" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z"/></svg>1行ずつだと何が行われているのかよくわかりませんね。前後との関係性があるのかもしれません。
1行ずつ重ねていく
1行 : 1行目は中心の円
1-2行 : 2行目は角丸■の塗りつぶし
1-3行 : 3行目は、1行目より一回り大い円で2行目を切り抜き？
1-4行 : 4行目は右上の白丸
1-5行 : 5行目は全体の角丸■で塗りつぶし
1-6行 : 6行目は2行目より一回り大きい角丸で5行目を切り抜き？
こうしてみると、1行ずつ意味を感じられます。
白黒反転してる
感じ的には、切り抜きではなく白黒反転しています。
という事は、5行目を消すと6行目が4行目を白黒反転、塗りつぶしではなく線のinstaアイコンになる筈です。
↓結果
推測は合っていると思われます。
まとめ
結論としては、FontAwesomeのinstagram-squareアイコンのSVGをダウンロードして
後ろ二つのパスを消す。
これが今回の答えとなりました。
実際のところ大人しく「なかったので、これでいいですか？」と聞いた方がよいとは思います。
しかし、時には強引に突破してみてはいかがでしょうか。
そうすることで見えてくることもあると思います。レッツ強引突破。