スポンサーリンク

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

スポンサーリンク
小ネタ
スポンサーリンク

スポンサーリンク

概要

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

デモ


Edit Icon generator -  shields io

情報

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

参考

shields.ioで技術系のアイコンをたくさん作ってみる
概要shields.ioを用いてテック系アイコンを量産しました。とりあえず完成したのがこちらです。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓これでスキルマップを作ってみたらいい感じになりました。アイコンジェネレータも作りました。 で技...
shields.ioを使って技術系アイコンを量産した - Qiita
## 概要 shields.ioを用いて技術系アイコンを量産しました。 とりあえず完成したのがこちらです。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ !(

ソース

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>
    <br>
    <div>
      TextLeft:
      <input type="text" v-model="inputItemTextLeft" v-on:keyup="generateIconUrl()">
      TextRight:
      <input
        type="text"
        v-model="inputItemTextRight"
        v-on:keyup="generateIconUrl()"
      >
      <br>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>
    <br>
    <div class="center">
      <img :src="dispLogoUrl" height="80">
    </div>
    <br>
    <div class="center">
      <button v-on:click="addItem()">add icon</button>
    </div>
    <br>
    <hr>
    <div class="center img-height-50" v-html="addesUrlsHTML"></div>
    <br>
    <pre><code>{{addesUrlsHTML}}</code></pre>
  </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>
小ネタ
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found
タイトルとURLをコピーしました