Generator - favicon

generator favicon

by jinam yu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.2/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/3.1.0/async.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" class="p-4">

    <form>
        <div class="form-group">
            <label>512x512 이미지 파일을 올려 보세요.</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" />
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button">Upload</button>
                </div>
                <input type="file" class="file" name="file" @change="change" />
            </div>
        </div>
    </form>
    <template v-if="image">
        <div class="container-fluid px-0 mt-3" v-for="(device, key) in images" :key="key">
            <h5>{{key}}</h5>
            <ul class="list-group">
                <li class="list-group-item" v-for="(item, index) in device" :key="item.size+':'+index">
                    <div class="media icons">
                        <img :src="item.data" class="mr-3" alt="" />
                        <div class="media-body">
                            <h6 class="m-0">{{`${item.size}x${item.size}`}}</h6>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="container-fluid px-0 mt-3">
            <h5>HTML</h5>
            <textarea class="form-control" rows="10" :value="html" readonly></textarea>
        </div>
        <div class="container-fluid px-0 mt-3">
            <button type="button" class="btn btn-primary" @click="click">Download</button>
        </div>
    </template>
</div>

CSS

html, body {
  background-color: #f8f9fa;
}

.list-group-item {
  padding: 16px;

}
.icons {
  align-items: center;  
}
.icons img {
  width: 32px;
}

.input-group{
  position: relative;
}
.input-group .file {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 z-index: 3; 
 opacity: 0;
}

.preview img {
  width: 100%;
}

Vue

new Vue({
    el: "#app",
    data: {
        image: null,
        images: {},
        android: [36, 48, 72, 96, 144, 192],
        apple: [57, 60, 72, 76, 114, 120, 144, 152, 180, 192],
        ms: [70, 144, 150, 310],
        favicon: [16, 32, 96, 192],
        density: {
            "36": "0.75",
            "48": "1.0",
            "72": "1.5",
            "96": "2.0",
            "144": "3.0",
            "192": "4.0"

        }
    },
    computed: {
        output() {},
        html() {
            let head = "";
            // apple
            head += this.apple.map(v => {
                return `<link rel="apple-touch-icon" sizes="${v}x${v}" href="/apple-icon-${v}x${v}.png" />`;
            }).join('\n');

            // favicon
            head += this.favicon.map(v => {
                return `<link rel="icon" type="image/png" sizes="${v}x${v}" href="/favicon-icon-${v}x${v}.png" />`;
            }).join('\n');

            // manifest
            head += `<link rel="manifest" href="/manifest.json" />\n`;
            head += `<meta name="msapplication-TileColor" content="#ffffff" />\n`;
            head += `<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />\n`;
            head += `<meta name="theme-color" content="#ffffff" />`;

            return head;
        },
        manifest() {
            let json = {
                name: "App",
                icons: this.android.map(v => {
                    return {
                        src: `/android-icon-${v}x${v}.png`,
                        sizes: `${v}x${v}`,
                        type: "image/png",
                        density: this.density[v] || "1.0",
                    }
                }),
            };

            return window.JSON.stringify(json, null, 4);
        },
        browserconfig() {
            let xml = `<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            ${ this.ms.map(v=>{
            	return...