shields.ioを使って技術系アイコンを量産した


概要

shields.ioを用いて技術系アイコンを量産しました。

とりあえず完成したのがこちらです。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

skills.png

これでスキルマップを作ってみたらいい感じになりました。


追記: ジェネレータを作ってみました。 (2019/07/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

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

color.png

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


カスタムスタイル

いくつかのスタイルが用意されています。

?style=plastic&logo=nginx



?style=flat&logo=java



?style=flat-square&logo=adobe



?style=for-the-badge&logo=gitlab



?style=popout&logo=kotlin



?style=popout-square&logo=google



?style=social&logo=qiita


simpleicons

バッジではいくつかのアイコンが使えます。

これについてはsimpleiconsを参考にします。

https://simpleicons.org/

そして、使えるアイコンの一例がこちらです。

 2019-07-08 1.41.11.png

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

Qiitaのアイコンもありました。

カラーコードとロゴがセットになっているのでコレを使ってアイコンを作っていきます。


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

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


言語系

 2019-07-08 23.38.15.png


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

 2019-07-08 23.38.46.png


OS

 2019-07-08 23.39.28.png


ミドルウェア

 2019-07-08 23.39.50.png


エディタ・IDE

 2019-07-08 23.40.09.png


クラウド・他

 2019-07-08 23.40.25.png


参考

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


付録1 : アイコンのURL

各アイコンのURLです。

### 言語系

<img src="https://img.shields.io/badge/PHP-ccc.svg?logo=php&style=flat">
<img src="https://img.shields.io/badge/Javascript-276DC3.svg?logo=javascript&style=flat">
<img src="https://img.shields.io/badge/-TypeScript-007ACC.svg?logo=typescript&style=flat">
<img src="https://img.shields.io/badge/-Python-F9DC3E.svg?logo=python&style=flat">
<img src="https://img.shields.io/badge/-CSS3-1572B6.svg?logo=css3&style=flat">
<img src="https://img.shields.io/badge/-HTML5-333.svg?logo=html5&style=flat">

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

<img src="https://img.shields.io/badge/-CakePHP-D3DC43.svg?logo=cakephp&style=flat">
<img src="https://img.shields.io/badge/-Rails-CC0000.svg?logo=rails&style=flat">
<img src="https://img.shields.io/badge/-Django-092E20.svg?logo=django&style=flat">
<img src="https://img.shields.io/badge/-Flask-000000.svg?logo=flask&style=flat">
<img src="https://img.shields.io/badge/-Bootstrap-563D7C.svg?logo=bootstrap&style=flat">
<img src="https://img.shields.io/badge/-React-555.svg?logo=react&style=flat">
<img src="https://img.shields.io/badge/-jQuery-0769AD.svg?logo=jquery&style=flat">

### OS

<img src="https://img.shields.io/badge/-Linux-6C6694.svg?logo=linux&style=flat">
<img src="https://img.shields.io/badge/-Ubuntu-6F52B5.svg?logo=ubuntu&style=flat">
<img src="https://img.shields.io/badge/-Windows-0078D6.svg?logo=windows&style=flat">
<img src="https://img.shields.io/badge/-RedHat-EE0000.svg?logo=red-hat&style=flat">
<img src="https://img.shields.io/badge/-Debian-A81D33.svg?logo=debian&style=flat">
<img src="https://img.shields.io/badge/-Raspberry%20Pi-C51A4A.svg?logo=raspberry-pi&style=flat">
<img src="https://img.shields.io/badge/-Arch%20Linux-EEE.svg?logo=arch-linux&style=flat">

### ミドルウェア

<img src="https://img.shields.io/badge/-Apache-D22128.svg?logo=apache&style=flat">
<img src="https://img.shields.io/badge/-Nginx-bfcfcf.svg?logo=nginx&style=flat">
<img src="https://img.shields.io/badge/-Oracle-f80000.svg?logo=oracle&style=flat">
<img src="https://img.shields.io/badge/-Redis-D82C20.svg?logo=redis&style=flat">
<img src="https://img.shields.io/badge/-Elasticsearch-005571.svg?logo=elasticsearch&style=flat">
<img src="https://img.shields.io/badge/-PostgreSQL-336791.svg?logo=postgresql&style=flat">

### エディタ・IDE

<img src="https://img.shields.io/badge/-Visual%20Studio%20Code-007ACC.svg?logo=visual-studio-code&style=flat">
<img src="https://img.shields.io/badge/-Vim-019733.svg?logo=vim&style=flat">
<img src="https://img.shields.io/badge/-Emacs-EEE.svg?logo=spacemacs&style=flat">
<img src="https://img.shields.io/badge/-Atom-66595C.svg?logo=atom&style=flat">
<img src="https://img.shields.io/badge/-Xcode-EEE.svg?logo=xcode&style=flat">
<img src="https://img.shields.io/badge/-intellij%20IDEA-000.svg?logo=intellij-idea&style=flat">

### クラウド・他

<img src="https://img.shields.io/badge/-Amazon%20AWS-232F3E.svg?logo=amazon-aws&style=flat">
<img src="https://img.shields.io/badge/-Google%20Cloud-EEE.svg?logo=google-cloud&style=flat">
<img src="https://img.shields.io/badge/-Ansible-EE0000.svg?logo=ansible&style=flat">
<img src="https://img.shields.io/badge/-GitHub-181717.svg?logo=github&style=flat">
<img src="https://img.shields.io/badge/-Docker-EEE.svg?logo=docker&style=flat">


付録2 : codesandboxのデモ



Edit Icon generator -  shields io