feat: svgtofont (#39)

* feat: generate font files use `svgtofont`

* chore: add ignore package in changeset config

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@icona/figma-plugin"]
+  "ignore": ["@icona/figma-plugin", "@icona/generator-test"]
 }

.changeset/wicked-jeans-trade.md

@@ -0,0 +1,9 @@
+---
+"@icona/generator": minor
+"@icona/types": minor
+"@icona/utils": minor
+---
+
+- (generator) Added `svgtofont` package to generate `font` (eot, ttf, woff, woff2, svg) files from `SVG` files.
+- (generator) Added `config.font` method in `generate` function to generate `font` files.
+- (generator) Added `generateFont` method

package.json

@@ -8,7 +8,8 @@
     "packages/types",
     "packages/utils",
     "packages/generator",
-    "figma-plugin"
+    "figma-plugin",
+    "test"
   ],
   "scripts": {
     "build": "ultra -r build",

packages/generator/.gitignore

@@ -1,10 +1 @@
 dist
-
-# for test
-svg
-pdf
-react
-png
-drawable
-.icona
-icona.js

packages/generator/package.json

@@ -33,7 +33,8 @@
     "pdfkit": "^0.13.0",
     "svg-to-pdfkit": "^0.1.8",
     "svg2vectordrawable": "^2.9.1",
-    "svgo": "^3.0.2"
+    "svgo": "^3.0.2",
+    "svgtofont": "^4.2.0"
   },
   "devDependencies": {
     "nanobundle": "^1.6.0",

packages/generator/src/core/font.ts

@@ -0,0 +1,41 @@
+import type { GenerateFontConfig } from "@icona/types";
+import { deleteAllFilesInDir, getProjectRootPath } from "@icona/utils";
+import { resolve } from "path";
+import svgtofont from "svgtofont";
+
+interface GenerateFontFunction {
+  /**
+   * @description Icona icons data
+   * @default .icona/icons.json
+   */
+  config: GenerateFontConfig;
+}
+
+/**
+ * @description SVG 폴더를 기준으로 폰트 파일들을 생성합니다.
+ */
+export const generateFont = ({ config }: GenerateFontFunction) => {
+  const { genMode, svgToFontOptions } = config;
+
+  const projectPath = getProjectRootPath();
+
+  const src = resolve(projectPath, svgToFontOptions?.src || "svg");
+  const dist = resolve(projectPath, svgToFontOptions?.dist || "font");
+  // NOTE: css 옵션을 넣어주지 않으면 error가 throw됨
+  const css = svgToFontOptions?.css || false;
+
+  if (genMode === "recreate") {
+    deleteAllFilesInDir(resolve(projectPath, dist));
+  }
+
+  console.log(`\nTTF Generate in \`${dist}\` folder...`);
+
+  const options = {
+    ...svgToFontOptions,
+    src,
+    dist,
+    css,
+  };
+
+  svgtofont(options);
+};

packages/generator/src/generator.ts

@@ -2,6 +2,7 @@ import type { IconaConfig, IconaIconData } from "@icona/types";
 import { getIconaIconsFile } from "@icona/utils";
 
 import { generateDrawable } from "./core/drawable.js";
+import { generateFont } from "./core/font.js";
 import { generatePDF } from "./core/pdf.js";
 import { generatePNG } from "./core/png.js";
 import { generateReact } from "./core/react.js";
@@ -11,7 +12,7 @@ export const generator = (
   icons: Record<string, IconaIconData>,
   config: IconaConfig,
 ) => {
-  const { pdf, drawable, react, svg, png } = config;
+  const { pdf, drawable, react, svg, png, font } = config;
 
   const generate = async () => {
     console.log("[@Icona/generator] Start generating...");
@@ -21,6 +22,7 @@ export const generator = (
     if (pdf?.active) generatePDF({ icons, config: pdf });
     if (drawable?.active) await generateDrawable({ icons, config: drawable });
     if (png?.active) await generatePNG({ icons, config: png });
+    if (font?.active) generateFont({ config: font });
 
     console.log("\n[@Icona/generator] Finish generating!!!");
   };

packages/generator/src/index.ts

@@ -1,4 +1,5 @@
 import { generateDrawable } from "./core/drawable.js";
+import { generateFont } from "./core/font.js";
 import { generatePDF } from "./core/pdf.js";
 import { generatePNG } from "./core/png.js";
 import { generateReact } from "./core/react.js";
@@ -8,6 +9,7 @@ import { generate, generator } from "./generator.js";
 export {
   generate,
   generateDrawable,
+  generateFont,
   generatePDF,
   generatePNG,
   generateReact,

packages/types/package.json

@@ -19,6 +19,7 @@
     "@types/prettier": "^2.7.3",
     "@types/svg-to-pdfkit": "^0.1.0",
     "svgo": "^3.0.2",
+    "svgtofont": "^4.2.0",
     "typescript": "^5.1.3"
   },
   "packageManager": "[email protected]",

packages/types/src/lib.d.ts

@@ -1,6 +1,7 @@
 import type { Config as SvgrConfig } from "@svgr/core";
 import type { SVGtoPDFOptions as LibSVGtoPDFOptions } from "svg-to-pdfkit";
 import type { Config as SvgoConfig } from "svgo";
+import type { SvgToFontOptions } from "svgtofont";
 
 type PDFKitConfig = PDFKit.PDFDocumentOptions & {
   /**
@@ -167,7 +168,7 @@ export interface GeneratePNGConfig {
   genMode?: GenerateMode;
 
   /**
-   * generate drawable xml files
+   * generate drawable PNG files
    * @default false
    */
   active: boolean;
@@ -179,10 +180,29 @@ export interface GeneratePNGConfig {
   path?: string;
 }
 
+export interface GenerateFontConfig {
+  /**
+   * @default overwrite
+   */
+  genMode?: GenerateMode;
+
+  /**
+   * generate drawable PNG files
+   * @default false
+   */
+  active: boolean;
+
+  /**
+   * @see https://wangchujiang.com/svgtofont/#options
+   */
+  svgToFontOptions?: SvgToFontOptions;
+}
+
 export interface IconaConfig {
   svg: GenerateSVGConfig;
   react: GenerateReactConfig;
   pdf: GeneratePDFConfig;
   drawable: GenerateDrawableConfig;
   png: GeneratePNGConfig;
+  font: GenerateFontConfig;
 }

test/.gitignore

@@ -0,0 +1,6 @@
+drawable
+font
+pdf
+png
+react
+svg

test/README.md

@@ -0,0 +1,7 @@
+# test
+
+test `@icona/generator` package.
+
+```bash
+yarn generate
+```

test/icona.js

@@ -0,0 +1,112 @@
+import { generate } from "@icona/generator";
+
+generate({
+  config: {
+    svg: {
+      active: false,
+      path: "svg",
+      svgoConfig: {
+        js2svg: {
+          indent: 2,
+          pretty: true,
+        },
+        plugins: [
+          {
+            name: "addAttributesToSVGElement",
+            params: {
+              attributes: [{ "data-seed-icon": true }],
+            },
+          },
+          {
+            name: "convertColors",
+            params: {
+              currentColor: true,
+            },
+          },
+          {
+            name: "removeAttrs",
+            params: {
+              attrs: ["id"],
+            },
+          },
+        ],
+      },
+    },
+    drawable: {
+      active: false,
+      path: "drawable",
+      svg2vectordrawableConfig: {},
+      defaultColor: "@color/gray900",
+    },
+    pdf: {
+      active: false,
+      path: "pdf",
+      pdfKitConfig: {
+        size: [24, 24],
+        margin: 0,
+        layout: "landscape",
+      },
+      svgToPdfOptions: {
+        assumePt: true,
+        width: 24,
+        height: 24,
+      },
+    },
+    react: {
+      active: false,
+      path: "react",
+      svgrConfig: {
+        jsxRuntime: "classic",
+        plugins: [
+          "@svgr/plugin-svgo",
+          "@svgr/plugin-jsx",
+          "@svgr/plugin-prettier",
+        ],
+        prettierConfig: {
+          tabWidth: 2,
+          useTabs: false,
+          singleQuote: true,
+          semi: true,
+        },
+        svgoConfig: {
+          plugins: [
+            {
+              name: "addAttributesToSVGElement",
+              params: {
+                attributes: [{ "data-seed-icon": true }],
+              },
+            },
+            {
+              name: "convertColors",
+              params: {
+                currentColor: true,
+              },
+            },
+            {
+              name: "removeAttrs",
+              params: {
+                attrs: ["id"],
+              },
+            },
+          ],
+        },
+        typescript: true,
+        dimensions: false,
+      },
+    },
+    png: {
+      active: false,
+      genMode: "recreate",
+      path: "png",
+    },
+    font: {
+      genMode: "recreate",
+      active: true,
+      svgToFontOptions: {
+        src: "svg",
+        dist: "font",
+        fontName: "seed-icon",
+      },
+    },
+  },
+});

test/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@icona/generator-test",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "generate": "node ./icona.js"
+  },
+  "dependencies": {
+    "@icona/generator": "workspace:^"
+  },
+  "devDependencies": {
+    "@icona/types": "workspace:^"
+  },
+  "packageManager": "[email protected]"
+}

tsconfig.eslint.json

@@ -3,7 +3,8 @@
   "include": [
     "packages",
     "figma-plugin/**/*",
-    ".eslintrc.js"
+    ".eslintrc.js",
+    "test"
   ],
   "exclude": [
     "packages/legacy",