Merge pull request #18 from coremyslo/Remove-base64-fallbacks-and-set…

…-as-default-option

Remove base64 fallbacks and set as default option

README.md

@@ -68,8 +68,8 @@ export default defineNuxtConfig({
     targetDirPath: "icon-font",
     // font formats to generate, fallback to ["woff2"] in case browserslist is not used, example for manual configuration: ["svg", "ttf", "woff", "woff2", "eot"] in any order
     formats: getFontFormatsList(browserslist()),
-    // Support of generating the most popular font as base64
-    base64: false,
+    // Generates font in memory as "woff" and injects it as base64 to reduce page jump effect, ignores "formats" option
+    base64: true,
     // unicode symbol for first icon in iconfont (makes sense to change only if you're not going to use custom properties)
     unicode: "0xE900",
     // generated custom properties (variables) format. Other options are: "snake", "pascal", "camel", "header", "constant"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coremyslo/nuxt-icon-font",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Nuxt icon font generator",
   "repository": {
     "type": "git",

src/module.ts

@@ -35,7 +35,7 @@ export default defineNuxtModule<ModuleOptions>({
     sourceDirPath: "assets/icon-font",
     targetDirPath: "icon-font",
     formats: getFontFormatsList(browserslist(), true),
-    base64: false,
+    base64: true,
     unicode: FontGenerator.optionsDefault.unicode,
     case: IconGenerator.optionsDefault.case,
   },
@@ -101,22 +101,24 @@ export default defineNuxtModule<ModuleOptions>({
           hash: "iefix",
         },
       };
-      options.formats.slice().reverse().forEach((value, index) => {
+      options.formats.slice().forEach((value, index) => {
         const font = fontGenerator.fonts.get(value);
         const url = `${targetDirPath}/${options.name}`.replace(new RegExp(`^.*\/${nuxt.options.dir.public}\/`), "");
         if (font) {
-          if (index === 0) {
-            if (value === "eot") {
-              text += `url('/${url}.eot?${font.uuid}');\n`;
-              text += "  src: ";
+          if (options.base64) {
+            if (value === "woff") {
+              const base64 = Buffer.from(font.value).toString("base64");
+              text += `url(data:${meta[value].data};charset=utf-8;base64,${base64}) format('${meta[value].format || value}')`;
             }
           } else {
-            text += ",\n     ";
-          }
-          if (options.base64 && options.formats[0] === value) {
-            const base64 = Buffer.from(font.value).toString("base64");
-            text += `url(data:${meta[value].data};charset=utf-8;base64,${base64}) format('${meta[value].format || value}')`;
-          } else {
+            if (index === 0) {
+              if (value === "eot") {
+                text += `url(/'${url}.eot?${font.uuid}');\n`;
+                text += "  src: ";
+              }
+            } else {
+              text += ",\n     ";
+            }
             text += `url('/${url}.${value}?${font.uuid}${meta[value].hash ? `#${meta[value].hash}` : ""}') format('${meta[value].format || value}')`;
           }
         }