shields.io用アイコンジェネレータを作ってみた

2019-07-13
%E5%B0%8F%E3%83%8D%E3%82%BFvue.jsshields.io
    

目次

概要

shields.io用アイコンジェネレータを作ってみました。

デモ

Edit Icon generator -  shields io

情報

Vue + codesandboxで作ってみました。 詳しい作り方はここを参考にしてください。

参考

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

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

ソース

index.vue

<template>
  <div class="main">
    <h2>icon-generator shields.io</h2>
    <div>
      Template :
      <select v-model="selectedIcon" v-on:change="bindItemStatus('');generateIconUrl()">
        <option disabled value>Please select one</option>
        <option v-for="option in options" v-bind:key="option.name">{{ option.name }}</option>
      </select>
    </div>
    <div>
      TextLeft:
      <input type="text" v-model="inputItemTextLeft" v-on:keyup="generateIconUrl()">
      TextRight:
      <input
        type="text"
        v-model="inputItemTextRight"
        v-on:keyup="generateIconUrl()"
      >
      Logo:
      <input type="text" v-model="inputItemLogo" v-on:keyup="generateIconUrl()">
      Color:
      <input type="text" v-model="inputItemColor" v-on:keyup="generateIconUrl()">
      Style:
      <select v-model="selectedStyle" v-on:change="generateIconUrl()">
        <option disabled value>Please select one</option>
        <option v-for="option in iconStyle" v-bind:key="option.name">{{ option.value }}</option>
      </select>
    </div>
    <div class="center">
      <img :src="dispLogoUrl" height="80">
    </div>
    <div class="center">
      <button v-on:click="addItem()">add icon</button>
    </div>
    
    <div class="center img-height-50" v-html="addesUrlsHTML"></div>
    
    <code>
    {{addesUrlsHTML}}
    </code>

  </div>
</template>

<script>
import icons from "../lib/icons.js";
import iconStyle from "../lib/iconStyle.js";
export default {
  name: "Index",
  data() {
    return {
      selectedIcon: "vue.js",
      options: icons,
      selectedStyle: "plastic",
      iconStyle: iconStyle,
      inputItemTextRight: "",
      inputItemTextLeft: "",
      inputItemLogo: "",
      inputItemColor: "",
      dispLogoUrl: "",
      addedIconsUrl: [],
      addesUrlsHTML: "",
      addesUrlsText: ""
    };
  },
  methods: {
    getColorCode(key) {
      for (let i = 0; i < icons.length; i++) {
        const name = icons[i].name;
        if (name === key) {
          return icons[i].color;
        }
      }
      return "";
    },
    bindItemStatus() {
      this.inputItemTextLeft = "";
      let text = this.selectedIcon.split("-").join(" ");
      text = text.split("");
      text[0] = text[0].toUpperCase();
      text = text.join("");
      this.inputItemTextRight = text;
      this.inputItemLogo = this.selectedIcon;
      this.inputItemColor = this.getColorCode(this.selectedIcon);
    },
    generateIconUrl() {
      this.dispLogoUrl = this.bindCustomIconUrl(
        this.inputItemTextLeft,
        this.inputItemTextRight,
        this.inputItemLogo,
        this.inputItemColor,
        this.selectedStyle
      );
    },
    bindCustomIconUrl(
      textLeft,
      textRight,
      logo,
      color = "ccc",
      style = "flat"
    ) {
      textLeft = encodeURI(textLeft);
      textRight = encodeURI(textRight);
      logo = encodeURI(logo);
      color = encodeURI(color);
      style = encodeURI(style);
      return `https://img.shields.io/badge/${textLeft}-${textRight}-${color}.svg?logo=${logo}&style=${style}`;
    },
    addItem() {
      this.addedIconsUrl.push(this.dispLogoUrl);
      this.addesUrlsHTML = this.addedIconsUrl
        .map(e => {
          return `<img src="${e}">`;
        })
        .join("\n");
    }
  },
  mounted() {
    this.bindItemStatus();
    this.generateIconUrl();
  }
};
</script>
    

関連記事

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

ハイフンとかマイナスとかダッシュとか

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

少なくとも、これら説明できない奴、エンジニアとして、マジでやばいので自覚した方がいいぞ。について
元ネタ(?) 派生 最後に Twitterでネタ(?)になっていたのでメモ。 元ネタ(?) https://twitter.com/t0riumi/status/1225422385093865472 派生 https://twitter.com/eg19/status…

Qiitaでバズるとこうなる。アクセスの分析や原因考察をする
投稿した記事 アクセス分析 Qiitaでバズった原因の考察 終わりに Qiitaに数年前から投稿していますが、延3日間で「1000 いいね」をもらいました。今までの最大いいねが20…

shields.ioで技術系のアイコンをたくさん作ってみる
shields.ioについて カスタムバッジを作る Color カスタムスタイル simpleicons おすすめアイコンを作った 言語系 ライブラリ・フレームワーク OS ミドルウェア エディタ・IDE…

MonacoEditor + Vue を使ってエディタを実装
紹介 セットアップ Vue vue-monaco Usage サンプルコード ポイント テーマカラーについて エディタのリサイズ エディタの変更の検知 Vue + MonacoEditorでJS…

画像のプーリング処理 canvas + JavaScript
プーリング処理について サンプルソース デモ 参考文献 JavaScriptで画像のプーリング処理を行ってみました。 プーリング処理について プーリングは畳み込みに似た処理で、CNN…

ブラウザで動くAtCoder用のデバッガを作ってみた (JSのみ)
AtCoder-JsDebugger 説明 フレームワーク、ライブラリなど ブラウザで完結するAtCoder用のデバッガを作ってみました。 対応言語は(JS)のみになっています。 というのも、書いたコードをブラウザ上でeval…

最新の投稿

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

AWS Amplify で コンテナベースのデプロイを行い REST API を構築
検証した環境 やってみる 初期準備 パイプラインを確認 終了処理 参考 AWS Amplify で コンテナベースのデプロイを行い REST API を構築した際のメモです。 検証した環境 amplify 5.1.…

Pythonでソケット通信を実装しメッセージの送受信を行う
ソース server.py client.py 動かしてみる 参考 Pythonでソケット通信を実現する方法です。 ソース server.py サーバ側のソースです。 client.py…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

応用情報技術者試験の合格体験記
受験時のステータス 受験結果 対策 スケジュール 午前問題 午後問題 参考書等 令和…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

Tags

Dates

s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV
© 2021   404 motivation not found