development_creative

この記事は1年以上経過しています。

【超簡単!】X(旧Twitter)のアイコンが欲しい方必見

もうだいぶ浸透してきたような気がする X(旧Twitter)ですが
web制作に携わってる人たちにはなかなか頭を悩ませますよね。

だってTwitterの青い鳥が名称と共に「X」に変わってしまったため
ロゴの差し替えしないといけないだのなんだのの対応しないといけないのですもの。

では差し替え作業しようかなと思ったら…

https://about.twitter.com/ja/who-we-are/brand-toolkit
Twitterのままですと…っ!?

というわけでXのアイコンデータは公式では用意されていません。
では自分で用意しよう!
ということでどうにかできないかと思いX内をデベロッパーツールで探索したところ

ここの部分を見てみると

<svg viewBox="0 0 24 24" aria-hidden="true" class="r-1nao33i r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e">
    <g>
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
    </g>
</svg>

とロゴのsvgコードがありましたのでまずはクラス名などのこちらのいらない部分を削ります。
viewBox=”0 0 24 24″ の部分は削っても削らなくてもどちらでもOK。

<svg>
    <g>
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
    </g>
</svg>

そしてこのコードをエディタで新規ファイルにペーストして.svgとして保存しましょう。
svgファイルに書き出す前に色とかを変えたい場合は予め適宣コードをいじくってくださいね。

あとはこれをIllustratorやPhotoshopで白抜きにするなりpngにするなりなんなりで
サイトに合わせたアイコンを用意するなりばよいかと思います。

というわけでsvgコードからsvgファイルを作成する方法でした。

Xのロゴやアイコンを探してる方は参考にしてください。

そのうち公式でガイドラインが配布されるとは思うので
配布されるようになったらきちんと公式のものを使うようにしましょう。

Related ariticle

関連記事

TOP