Add all ISO 639-1 languages

colors.json

@@ -1,10 +1,186 @@
 {
-  "en": ["#3B3B6D", "#B42F34"],
-  "nl": ["#AF2D27", "#21468B"],
+  "aa": [],
+  "ab": [],
+  "ae": [],
+  "af": [],
+  "ak": [],
+  "am": [],
+  "an": [],
+  "ar": [],
+  "as": ["#F19733", "#46890E"],
+  "av": [],
+  "ay": [],
+  "az": [],
+  "ba": [],
+  "be": [],
+  "bg": [],
+  "bh": ["#F19733", "#46890E"],
+  "bi": [],
+  "bm": [],
+  "bn": ["#F19733", "#46890E"],
+  "bo": [],
+  "br": [],
+  "bs": [],
+  "ca": [],
+  "ce": [],
+  "ch": [],
+  "co": [],
+  "cr": [],
+  "cs": [],
+  "cu": [],
+  "cv": [],
+  "cy": [],
+  "da": [],
   "de": ["#000000", "#DE3B30", "#FACD33"],
+  "dv": [],
+  "dz": [],
+  "ee": [],
+  "el": [],
+  "en": ["#3B3B6D", "#B42F34"],
+  "eo": [],
   "es": ["#DE3B30", "#F8C433", "#DE3B30"],
+  "et": [],
+  "eu": [],
+  "fa": [],
+  "ff": [],
+  "fi": [],
+  "fj": [],
+  "fo": [],
   "fr": ["#00267F", "#E93F33"],
+  "fy": [],
+  "ga": [],
+  "gd": [],
+  "gl": [],
+  "gn": [],
+  "gu": ["#F19733", "#46890E"],
+  "gv": [],
+  "ha": [],
+  "he": [],
+  "hi": ["#F19733", "#46890E"],
+  "ho": [],
+  "hr": [],
+  "ht": [],
+  "hu": [],
+  "hy": [],
+  "hz": [],
+  "ia": [],
+  "id": [],
+  "ie": [],
+  "ig": [],
+  "ii": [],
+  "ik": [],
+  "io": [],
+  "is": [],
   "it": ["#499348", "#CF3737"],
+  "iu": [],
+  "ja": [],
+  "jv": [],
+  "ka": [],
+  "kg": [],
+  "ki": [],
+  "kj": [],
+  "kk": [],
+  "kl": [],
+  "km": [],
+  "kn": [],
+  "ko": [],
+  "kr": [],
+  "ks": ["#F19733", "#46890E"],
+  "ku": [],
+  "kv": [],
+  "kw": [],
+  "ky": [],
+  "la": [],
+  "lb": [],
+  "lg": [],
+  "li": [],
+  "ln": [],
+  "lo": [],
+  "lt": [],
+  "lu": [],
+  "lv": [],
+  "mg": [],
+  "mh": [],
+  "mi": [],
+  "mk": [],
+  "ml": [],
+  "mn": [],
+  "mr": ["#F19733", "#46890E"],
+  "ms": [],
+  "mt": [],
+  "my": [],
+  "na": [],
+  "nb": [],
+  "nd": [],
+  "ne": ["#F19733", "#46890E"],
+  "ng": [],
+  "nl": ["#AF2D27", "#21468B"],
+  "nn": [],
+  "no": [],
+  "nr": [],
+  "nv": [],
+  "ny": [],
+  "oc": [],
+  "oj": [],
+  "om": [],
+  "or": ["#F19733", "#46890E"],
+  "os": [],
+  "pa": ["#F19733", "#46890E"],
+  "pi": [],
+  "pl": [],
+  "ps": [],
   "pt": ["#336704", "#E93F33", "#E93F33"],
-  "zh": ["#DE3B30"]
-}
+  "qu": [],
+  "rm": [],
+  "rn": [],
+  "ro": [],
+  "ru": [],
+  "rw": [],
+  "sa": ["#F19733", "#46890E"],
+  "sc": [],
+  "sd": [],
+  "se": [],
+  "sg": [],
+  "si": [],
+  "sk": [],
+  "sl": [],
+  "sm": [],
+  "sn": [],
+  "so": [],
+  "sq": [],
+  "sr": [],
+  "ss": [],
+  "st": [],
+  "su": [],
+  "sv": [],
+  "sw": [],
+  "ta": [],
+  "te": [],
+  "tg": [],
+  "th": [],
+  "ti": [],
+  "tk": [],
+  "tl": [],
+  "tn": [],
+  "to": [],
+  "tr": [],
+  "ts": [],
+  "tt": [],
+  "tw": [],
+  "ty": [],
+  "ug": [],
+  "uk": [],
+  "ur": [],
+  "uz": [],
+  "ve": [],
+  "vi": [],
+  "vo": [],
+  "wa": [],
+  "wo": [],
+  "xh": [],
+  "yi": [],
+  "yo": [],
+  "za": [],
+  "zh": ["#DE3B30"],
+  "zu": []
+}

index.ts

@@ -1,9 +1,19 @@
 import { read, write } from "./files";
+import { widths } from "./widths";
 import * as colors from "./colors.json";
 
-console.log(`Generating ${Object.keys(colors).length} icons...`);
-let templates: string[] = [];
+const templates: string[] = [];
+const leftMargin = (code: string) => {
+  const totalWidth = 128;
+  let width = 0;
+  code.split("").forEach(character => {
+    character = character.toUpperCase();
+    if (widths[character]) width += widths[character];
+  });
+  return Math.floor((totalWidth - width) / 2);
+};
 
+console.log(`Generating ${Object.keys(colors).length} icons...`);
 read("one-color.svg")
   .then((oneColor: string) => templates.push(oneColor))
   .then(() => read("two-colors.svg"))
@@ -15,9 +25,10 @@ read("one-color.svg")
     keys.map(code =>
       write(
         `${code}.svg`,
-        templates[colors[code].length - 1]
+        templates[colors[code].length ? colors[code].length - 1 : 1]
           .replace("LANGUAGE_CODE", code.toUpperCase())
-          .replace("COLOR_1", colors[code][0])
+          .replace(`x="20"`, `x="${leftMargin(code)}"`)
+          .replace("COLOR_1", colors[code].length ? colors[code][0] : "#2980b9")
           .replace("COLOR_2", colors[code][1])
           .replace("COLOR_3", colors[code][2])
       )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "language-icons",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "https://github.com/AnandChowdhary/language-icons",

widths.ts

@@ -0,0 +1,34 @@
+/**
+ * These are the approximate character widths in pixels
+ * of glyphs in Arial, 64px, calculated by going to an
+ * about:blank page and writing this in the console:
+ * document.body.style = "font-family: Arial; font-size: 64px; margin: 30px"; "QWERTYUIOPASDFGHJKLZXCVBNM".split("").forEach(key => { document.body.innerHTML = ""; document.body.innerHTML = `<span>${key}</span>`; console.log(key, document.querySelector("span").offsetWidth); });
+ */
+export const widths = {
+  Q: 50,
+  W: 60,
+  E: 43,
+  R: 46,
+  T: 39,
+  Y: 43,
+  U: 46,
+  I: 18,
+  O: 50,
+  P: 43,
+  A: 43,
+  S: 43,
+  D: 46,
+  F: 39,
+  G: 50,
+  H: 46,
+  J: 32,
+  K: 43,
+  L: 36,
+  Z: 39,
+  X: 43,
+  C: 46,
+  V: 43,
+  B: 43,
+  N: 46,
+  M: 53
+};