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>
    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

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…

ブラウザ上でWindowsXPが動く??
紹介 エミュレータでもVMでもなく Reactによって作られたものだそうです。 完成度高ぃ demohttps://t.co/mjBg4pkgNa pic.twitter.com/s0bkHFyKHO — s-yoshiki…

最新の投稿

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

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

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

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

Tags

Dates

© 2020   404 motivation not found