Skip to content

Commit

Permalink
feat: svgtofont (#39)
Browse files Browse the repository at this point in the history
* feat: generate font files use `svgtofont`

* chore: add ignore package in changeset config
  • Loading branch information
junghyeonsu authored Mar 19, 2024
1 parent ba28fa2 commit af4efe8
Show file tree
Hide file tree
Showing 178 changed files with 7,727 additions and 40 deletions.
2 changes: 1 addition & 1 deletion .changeset/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
"access": "restricted",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": ["@icona/figma-plugin"]
"ignore": ["@icona/figma-plugin", "@icona/generator-test"]
}
9 changes: 9 additions & 0 deletions .changeset/wicked-jeans-trade.md
Original file line number Diff line number Diff line change
@@ -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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"packages/types",
"packages/utils",
"packages/generator",
"figma-plugin"
"figma-plugin",
"test"
],
"scripts": {
"build": "ultra -r build",
Expand Down
9 changes: 0 additions & 9 deletions packages/generator/.gitignore
Original file line number Diff line number Diff line change
@@ -1,10 +1 @@
dist

# for test
svg
pdf
react
png
drawable
.icona
icona.js
3 changes: 2 additions & 1 deletion packages/generator/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
41 changes: 41 additions & 0 deletions packages/generator/src/core/font.ts
Original file line number Diff line number Diff line change
@@ -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);
};
4 changes: 3 additions & 1 deletion packages/generator/src/generator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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...");
Expand All @@ -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!!!");
};
Expand Down
2 changes: 2 additions & 0 deletions packages/generator/src/index.ts
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -8,6 +9,7 @@ import { generate, generator } from "./generator.js";
export {
generate,
generateDrawable,
generateFont,
generatePDF,
generatePNG,
generateReact,
Expand Down
1 change: 1 addition & 0 deletions packages/types/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "yarn@3.5.1",
Expand Down
22 changes: 21 additions & 1 deletion packages/types/src/lib.d.ts
Original file line number Diff line number Diff line change
@@ -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 & {
/**
Expand Down Expand Up @@ -167,7 +168,7 @@ export interface GeneratePNGConfig {
genMode?: GenerateMode;

/**
* generate drawable xml files
* generate drawable PNG files
* @default false
*/
active: boolean;
Expand All @@ -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;
}
6 changes: 6 additions & 0 deletions test/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
drawable
font
pdf
png
react
svg
5,822 changes: 5,822 additions & 0 deletions test/.icona/icons.json

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions test/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# test

test `@icona/generator` package.

```bash
yarn generate
```
112 changes: 112 additions & 0 deletions test/icona.js
Original file line number Diff line number Diff line change
@@ -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",
},
},
},
});
16 changes: 16 additions & 0 deletions test/package.json
Original file line number Diff line number Diff line change
@@ -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": "yarn@3.5.1"
}
3 changes: 2 additions & 1 deletion tsconfig.eslint.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"include": [
"packages",
"figma-plugin/**/*",
".eslintrc.js"
".eslintrc.js",
"test"
],
"exclude": [
"packages/legacy",
Expand Down
Loading

0 comments on commit af4efe8

Please sign in to comment.