shields.ioで技術系のアイコンをたくさん作ってみる

目次

1. 概要
2. shieldsioについて
3. おすすめアイコンを作った
4. アイコンジェネレータを作った
5. 参考

概要

shields.ioを用いてテック系アイコンを量産しました。 とりあえず完成したのがこちらです。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ これでスキルマップを作ってみたらいい感じになりました。

アイコンジェネレータも作りました。

https://t.co/6Xv6XIuzRm で技術系アイコンを作るジェネレータを作りました。

デモはここに置いてます。https://t.co/Xua8v7WEwi pic.twitter.com/SYzZY6lejb

— s-yoshiki | スクリプトカス ? (@s_yoshiki_dev) 2019年7月13日

shields.ioについて

https://shields.io/ GitHubのREADMEでよく見かけるアレです。 shields.ioはSVG形式のバッジサービスです。

カスタムバッジを作る

特徴的な機能の1つとして URLのパターンでカスタムバッジを作ることができます。

https://img.shields.io/badge/${subject}-${status}-${color}.svg

subject : バッジの左側に入る文言 status : バッジの右側に入る文言 color : 色

Color

以下のようなものが用意されています。

16進数形式で指定することも可能です。

カスタムスタイル

いくつかのスタイルが用意されています。 ?style=plastic&logo=appveyor ?style=flat&logo=appveyor ?style=flat-square&logo=appveyor ?style=for-the-badge&logo=appveyor ?style=popout&logo=appveyor ?style=popout-square&logo=appveyor ?style=social&logo=appveyor

simpleicons

バッジではいくつかのアイコンが使えます。 これについてはsimpleiconsを参考になります。 https://simpleicons.org/ そして一例がこれです。

全部で数えたら648ありました。

おすすめアイコンを作った

おすすめしたいアイコンを作りました。

言語系

ライブラリ・フレームワーク

OS

ミドルウェア

エディタ・IDE

クラウド・他

アイコンジェネレータを作った。

アイコンジェネレータを作りました。 ロゴ名の設定などで一部自分で調整が必要なものがあります。

参考

https://tech-blog.s-yoshiki.com/2019/07/1406/

https://qiita.com/s-yoshiki/items/436bbe1f7160b610b05c