diff --git a/package-lock.json b/package-lock.json index fbb438f..780b9f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "fs-extra": "^11.2.0", "glob": "^10.3.10", "oslllo-svg-fixer": "^4.0.1", - "svgtofont": "^4.0.1" + "svgtofont": "^4.2.0" }, "bin": { "gif": "dist/index.js" diff --git a/package.json b/package.json index b851946..9783682 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "fs-extra": "^11.2.0", "glob": "^10.3.10", "oslllo-svg-fixer": "^4.0.1", - "svgtofont": "^4.0.1" + "svgtofont": "^4.2.0" }, "devDependencies": { "@types/fs-extra": "^11.0.4", diff --git a/src/clean-icons/cli.ts b/src/clean-icons/cli.ts index 66c80e9..67990e4 100644 --- a/src/clean-icons/cli.ts +++ b/src/clean-icons/cli.ts @@ -1,35 +1,45 @@ -import { OptionsType, ProgrammOptionsType } from '../types'; +import { OptionsType, ProgrammOptionsType } from "../types"; import cleanIcons from "./index"; import startProgram from "../program"; - const options: ProgrammOptionsType[] = [ - { - name: 'ignoreGlobs', - short: 'ig', - description: 'Path icon glob to exclude from the fonts', - array: true - }, - { - name: 'src', - description: 'Src folder with all svgs', - required: true - }, - { - name: 'debug', - description: 'Extra logging', - defaultValue: false - } + { + name: "ignoreGlobs", + short: "ig", + description: "Path icon glob to exclude from the fonts", + array: true, + }, + { + name: "src", + description: "Src folder with all svgs", + required: true, + }, + { + name: "traceResolution", + description: "Src folder with all svgs", + defaultValue: "600", + required: false, + }, + { + name: "debug", + description: "Extra logging", + defaultValue: false, + }, ]; const action = async (_: string, options: { _optionValues: OptionsType }) => { - const { src, ignoreGlobs, debug } = options._optionValues; - await cleanIcons(src, ignoreGlobs, debug); + const { + src, + ignoreGlobs, + debug, + traceResolution = "600", + } = options._optionValues; + await cleanIcons(src, ignoreGlobs, traceResolution, debug); }; startProgram( - '@db-ui/foundations - clean icons', - 'CLI to clean icon for icon fonts to work', - options, - action + "@db-ui/foundations - clean icons", + "CLI to clean icon for icon fonts to work", + options, + action, ); diff --git a/src/clean-icons/index.ts b/src/clean-icons/index.ts index cc07c7d..9c9cc7f 100644 --- a/src/clean-icons/index.ts +++ b/src/clean-icons/index.ts @@ -7,6 +7,7 @@ import { error } from "console"; const cleanIcons = async ( src: string, ignoreGlobs?: string[], + traceResolution?: string, debug?: boolean, ) => { const paths = `${src}/**/*.svg`; @@ -23,7 +24,10 @@ const cleanIcons = async ( const promises: Promise[] = globPaths.map(async (path) => { try { // eslint-disable-next-line no-await-in-loop,new-cap - return await SVGFixer(path, path, { showProgressBar: debug }).fix(); + return await SVGFixer(path, path, { + showProgressBar: debug, + traceResolution: Number(traceResolution || "600"), + }).fix(); } catch (catchError) { error(path, catchError); return catchError; diff --git a/src/generate-icon-fonts/data.ts b/src/generate-icon-fonts/data.ts index 9694726..97d598c 100644 --- a/src/generate-icon-fonts/data.ts +++ b/src/generate-icon-fonts/data.ts @@ -1,61 +1,68 @@ -import { ProgrammOptionsType } from '../types'; +import { ProgrammOptionsType } from "../types"; export const gifOptions: ProgrammOptionsType[] = [ - { - name: 'ignoreGlobs', - description: 'Path icon glob to exclude from the fonts', - array: true - }, - { - name: 'variants', - description: - 'Font variants e.g. solid, inverted, etc. We always add a "default" variant for icons.', - array: true, - defaultValue: [] - }, - { - name: 'cleanIgnoreVariants', - description: - 'Ignore variants which should not be cleaned automatically', - array: true, - defaultValue: [] - }, - { - name: 'withSizes', - description: 'Splits the font into different sizes' - }, - { - name: 'src', - description: 'Src folder with all svgs', - required: true - }, - { - name: 'prefix', - description: 'Prefix of icons to delete for icons' - }, - { - name: 'fontName', - description: 'The name of your font', - required: true - }, - { - name: 'dryRun', - description: 'prints the output of the command' - }, - { - name: 'debug', - description: 'Extra logging', - defaultValue: false - } + { + name: "ignoreGlobs", + description: "Path icon glob to exclude from the fonts", + array: true, + }, + { + name: "variants", + description: + 'Font variants e.g. solid, inverted, etc. We always add a "default" variant for icons.', + array: true, + defaultValue: [], + }, + { + name: "cleanIgnoreVariants", + description: "Ignore variants which should not be cleaned automatically", + array: true, + defaultValue: [], + }, + { + name: "withSizes", + description: "Splits the font into different sizes", + }, + { + name: "src", + description: "Src folder with all svgs", + required: true, + }, + { + name: "prefix", + description: "Prefix of icons to delete for icons", + }, + { + name: "fontName", + description: "The name of your font", + required: true, + }, + { + name: "dryRun", + short: "dry", + description: "prints the output of the command", + }, + { + name: "debug", + description: "Extra logging", + defaultValue: false, + }, + // TODO: This is buggy we should fix it by making a PR to https://github.com/jaywcjlove/svgtofont +/* { + name: "outSVGReact", + description: "Creates react svg components", + short: "react", + defaultValue: false, + },*/ ]; export const fileEndingsToDelete = [ - 'eot', - 'less', - 'module.less', - 'styl', - 'svg', - 'symbol.svg', - 'ttf', - 'woff' + "eot", + "less", + "module.less", + "styl", + "svg", + "symbol.svg", + "ttf", + "woff", ]; diff --git a/src/generate-icon-fonts/index.ts b/src/generate-icon-fonts/index.ts index 9072d3c..1aec9e5 100644 --- a/src/generate-icon-fonts/index.ts +++ b/src/generate-icon-fonts/index.ts @@ -23,6 +23,7 @@ const generateIconFonts = async (values: OptionsType): Promise => { cleanIgnoreVariants, debug = false, overwriteSources = false, + traceResolution = "600", } = values; const dist = `${src}/fonts`; const temporaryDirectory = `${src}/tmp`; @@ -46,7 +47,12 @@ const generateIconFonts = async (values: OptionsType): Promise => { gatherIcons(temporaryDirectory, values); debugLog(debug, "---Start cleaning icon---"); - await cleanIcons(`${temporaryDirectory}/*`, ignoreVariants, debug); + await cleanIcons( + `${temporaryDirectory}/*`, + ignoreVariants, + traceResolution, + debug, + ); debugLog(debug, "---Start svg to font ---"); const allTemporaryDirectories = FSE.readdirSync(temporaryDirectory); diff --git a/src/generate-icon-fonts/svg-to-font.ts b/src/generate-icon-fonts/svg-to-font.ts index 2b14e05..862c17f 100644 --- a/src/generate-icon-fonts/svg-to-font.ts +++ b/src/generate-icon-fonts/svg-to-font.ts @@ -1,54 +1,55 @@ -import path from 'node:path'; +import path from "node:path"; -import svgtofont from 'svgtofont'; -import { OptionsType } from '../types'; +import svgtofont from "svgtofont"; +import { OptionsType } from "../types"; +import { log } from "console"; const svgToFont = async ( - temporaryDirectory: string, - dist: string, - options: OptionsType + temporaryDirectory: string, + dist: string, + options: OptionsType, ) => { - const { fontName, debug } = options; - const fileName = __filename; - let lastSlashIndex = fileName.lastIndexOf('\\'); - if (lastSlashIndex === -1) { - lastSlashIndex = fileName.lastIndexOf('/'); - } + const { fontName, debug, svgoOptions, outSVGReact, svgicons2svgfont } = + options; + const fileName = __filename; + let lastSlashIndex = fileName.lastIndexOf("\\"); + if (lastSlashIndex === -1) { + lastSlashIndex = fileName.lastIndexOf("/"); + } - const generateIconFontsDir = fileName.slice(0, Math.max(0, lastSlashIndex)); + const generateIconFontsDir = fileName.slice(0, Math.max(0, lastSlashIndex)); - try { - return svgtofont({ - src: temporaryDirectory, - dist, - fontName, - log: debug, - css: true, - outSVGReact: false, // TODO: Consider if we want to give this to users - outSVGPath: false, - useNameAsUnicode: true, - generateInfoData: true, - // SvgoOptions: TODO: https://github.com/svg/svgo#configuration, - svgicons2svgfont: { - fontHeight: 1000, - normalize: true, - centerHorizontally: true - }, - website: { - index: 'font-class', - template: path.resolve( - generateIconFontsDir, - 'templates/template.ejs' - ), - links: [{ title: '', url: '' }] - }, - styleTemplates: path.resolve(generateIconFontsDir, 'styles') - }); - } catch (error) { - console.error(error); - } + try { + return svgtofont({ + src: temporaryDirectory, + dist, + fontName, + log: debug, + logger: (message) => log(message), + css: true, + outSVGReact, + outSVGPath: true, + useNameAsUnicode: true, + generateInfoData: true, + svgoOptions, + svgicons2svgfont: { + fontHeight: 1000, + normalize: true, + centerHorizontally: true, + ...svgicons2svgfont, + }, + website: { + index: "font-class", + template: path.resolve(generateIconFontsDir, "templates/template.ejs"), + links: [{ title: "", url: "" }], + }, + styleTemplates: path.resolve(generateIconFontsDir, "styles"), + }); + } catch (error) { + console.error(error); + } - return true; + return true; }; export default svgToFont; diff --git a/src/program.ts b/src/program.ts index 4dbb881..c504350 100644 --- a/src/program.ts +++ b/src/program.ts @@ -1,42 +1,42 @@ -import { program } from 'commander'; -import { OptionsType, ProgrammOptionsType } from './types'; +import { program } from "commander"; +import { OptionsType, ProgrammOptionsType } from "./types"; const startProgram = ( - name: string, - description: string, - options: ProgrammOptionsType[], - action: (_: string, options: { _optionValues: OptionsType }) => void + name: string, + description: string, + options: ProgrammOptionsType[], + action: (_: string, options: { _optionValues: OptionsType }) => void, ) => { - program.name(name).description(description); + program.name(name).description(description); - for (const option of options) { - const short = - (option.short?.startsWith('-') - ? option.short - : `-${option.short}`) || `-${option.name.charAt(0)}`; - const long = - option.long || - `--${option.name} ${option.array ? '[' : '<'}${option.name}${ - option.array ? 's...]' : '>' - }`; - if (option.required) { - program.requiredOption( - `${short}, ${long}`, - option.description || '', - option.defaultValue - ); - } else { - program.option( - `${short}, ${long}`, - option.description || '', - option.defaultValue - ); - } - } + for (const option of options) { + const short = + (option.short && + (option.short?.startsWith("-") ? option.short : `-${option.short}`)) || + `-${option.name.charAt(0)}`; + const long = + option.long || + `--${option.name} ${option.array ? "[" : "<"}${option.name}${ + option.array ? "s...]" : ">" + }`; + if (option.required) { + program.requiredOption( + `${short}, ${long}`, + option.description || "", + option.defaultValue, + ); + } else { + program.option( + `${short}, ${long}`, + option.description || "", + option.defaultValue, + ); + } + } - program.action(action); + program.action(action); - program.parse(); + program.parse(); }; export default startProgram; diff --git a/src/types.ts b/src/types.ts index a59cd4f..0321117 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,6 @@ +import { Config } from "svgo"; +import { SvgIcons2FontOptions } from "svgicons2svgfont"; + export type ProgrammOptionsType = { name: string; short?: string; @@ -19,4 +22,18 @@ export type OptionsType = { prefix?: string; withSizes?: boolean; ignoreGlobs?: string[]; + traceResolution?: string; + /** + * https://github.com/svg/svgo#configuration + */ + svgoOptions?: Config; + /** + * Creates svg react components + */ + outSVGReact?: boolean; + + /** + * This is the setting for [svgicons2svgfont](https://github.com/nfroidure/svgicons2svgfont/tree/dd713bea4f97afa59f7dba6a21ff7f22db565bcf#api) + */ + svgicons2svgfont?: SvgIcons2FontOptions; }; diff --git a/test/simple/db.svg b/test/simple/db.svg new file mode 100644 index 0000000..fdf454b --- /dev/null +++ b/test/simple/db.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/simple/db_logo.svg b/test/simple/db_logo.svg deleted file mode 100644 index 02278be..0000000 --- a/test/simple/db_logo.svg +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/test/simple/ignore/db.svg b/test/simple/ignore/db.svg new file mode 100644 index 0000000..fdf454b --- /dev/null +++ b/test/simple/ignore/db.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/test/simple/ignore/db_logo.svg b/test/simple/ignore/db_logo.svg deleted file mode 100644 index 02278be..0000000 --- a/test/simple/ignore/db_logo.svg +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/test/simple/simple.test.ts b/test/simple/simple.test.ts index 322cb64..5199581 100644 --- a/test/simple/simple.test.ts +++ b/test/simple/simple.test.ts @@ -21,14 +21,12 @@ describe("simple", () => { src: "./test/simple", ignoreGlobs: ["**/ignore/**", "**/tmp/**"], cleanIgnoreVariants: [], - variants: [], + variants: [] }); const infoJson = JSON.parse( fs.readFileSync("./test/simple/fonts/all/info.json").toString("utf-8"), ); - expect(infoJson.db_logo.unicode).toBe( - "d&#98;&#95;&#108;&#111;&#103;&#111;", - ); + expect(infoJson.db.unicode).toBe("d&#98;"); }); });