Added option "startCodepoint" to define start code point value

package.json

@@ -40,31 +40,31 @@
   "dependencies": {
     "change-case": "^4.1.2",
     "cli-color": "^2.0.0",
-    "commander": "^7.2.0",
+    "commander": "^8.2.0",
     "glob": "^7.2.0",
     "handlebars": "^4.7.7",
     "slugify": "^1.6.0",
     "svg2ttf": "^6.0.3",
     "svgicons2svgfont": "^10.0.3",
-    "ttf2eot": "^2.0.0",
+    "ttf2eot": "^3.0.0",
     "ttf2woff": "^3.0.0",
     "ttf2woff2": "^4.0.4"
   },
   "devDependencies": {
-    "@types/cli-color": "^2.0.0",
-    "@types/glob": "^7.1.3",
+    "@types/cli-color": "^2.0.1",
+    "@types/glob": "^7.1.4",
     "@types/jest": "^27.0.2",
     "@types/node": "^16.10.2",
     "@types/svg2ttf": "^5.0.1",
     "@types/svgicons2svgfont": "^10.0.1",
     "@types/ttf2eot": "^2.0.0",
     "@types/ttf2woff": "^2.0.2",
     "@types/ttf2woff2": "^2.0.0",
-    "jest": "^26.6.3",
+    "jest": "^27.2.0",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
     "semantic-release": "^18.0.0",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.0.5",
     "typescript": "^4.4.3"
   },
   "jest": {

src/constants.ts

@@ -5,6 +5,8 @@ import { getIconId } from './utils/icon-id';
 
 export const TEMPLATES_DIR = resolve(__dirname, '../templates');
 
+export const DEFAULT_START_CODEPOINT = 0xf101;
+
 export const DEFAULT_OPTIONS: Omit<RunnerOptions, 'inputDir' | 'outputDir'> = {
   name: 'icons',
   fontTypes: [FontAssetType.EOT, FontAssetType.WOFF2, FontAssetType.WOFF],
@@ -17,6 +19,7 @@ export const DEFAULT_OPTIONS: Omit<RunnerOptions, 'inputDir' | 'outputDir'> = {
   formatOptions: { json: { indent: 4 } },
   pathOptions: {},
   templates: {},
+  startCodepoint: DEFAULT_START_CODEPOINT,
   codepoints: {},
   round: undefined,
   fontHeight: 300,
@@ -28,5 +31,3 @@ export const DEFAULT_OPTIONS: Omit<RunnerOptions, 'inputDir' | 'outputDir'> = {
   fontsUrl: undefined,
   getIconId: getIconId
 };
-
-export const DEFAULT_START_CODEPOINT = 0xf101;

src/core/__tests__/config-parser.ts

@@ -1,6 +1,6 @@
 import { parseConfig } from '../config-parser';
 import { checkPath } from '../../utils/fs-async';
-import { DEFAULT_OPTIONS } from '../../constants';
+import { DEFAULT_OPTIONS, DEFAULT_START_CODEPOINT } from '../../constants';
 
 const checkPathMock = checkPath as any as jest.Mock;
 
@@ -25,6 +25,7 @@ const mockConfig = {
   normalize: true,
   round: 3,
   selector: null,
+  startCodepoint: DEFAULT_START_CODEPOINT,
   tag: 'f',
   prefix: 'baz',
   fontsUrl: '/fonts',

src/core/config-parser.ts

@@ -23,6 +23,7 @@ const CONFIG_VALIDATORS: {
   formatOptions: [],
   pathOptions: [],
   templates: [],
+  startCodepoint: [optional(parseNumeric)],
   codepoints: [],
   fontHeight: [optional(parseNumeric)],
   descent: [optional(parseNumeric)],

src/generators/__tests__/generator-options.ts

@@ -99,13 +99,17 @@ describe('Font generator options', () => {
 
   test('`getGeneratorOptions` calls `getCodepoints` with input assets and codepoints', () => {
     const codepointsIn = { foo: 'bar' };
-    const options = { codepoints: codepointsIn } as any;
-    const assets = {} as unknown as AssetsMap;
+    const startCodepointIn = 10;
+    const options = {
+      codepoints: codepointsIn,
+      startCodepoint: startCodepointIn,
+    } as any;
+    const assets = ({} as unknown) as AssetsMap;
 
     getGeneratorOptions(options, assets);
 
     expect(getCodepointsMock).toHaveBeenCalledTimes(1);
-    expect(getCodepointsMock).toHaveBeenCalledWith(assets, codepointsIn);
+    expect(getCodepointsMock).toHaveBeenCalledWith(assets, codepointsIn, startCodepointIn);
   });
 
   test('`getGeneratorOptions` correctly processes templates option', () => {

src/generators/asset-types/__tests__/__snapshots__/html.ts.snap

@@ -33,7 +33,8 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam
             font-size: 40px;
             color: #333;
         }
-        .label {
+        .label,
+        .codepoint {
             display: inline-block;
             width: 100%;
             box-sizing: border-box;
@@ -43,6 +44,7 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam
             color: #666;
             white-space: nowrap;
             overflow: hidden;
+            vertical-align: top;
             text-overflow: ellipsis;
             background: #ddd;
             -webkit-border-radius: 0 0 3px 3px;
@@ -60,11 +62,13 @@ exports[`\`HTML\` asset generator renders HTML correctly with prefix and tag nam
 
 
         <div class=\\"preview\\">
+            <span class='label'>my-icon</span>
+            <br>
             <span class=\\"inner\\">
                 <b class=\\"tf tf-my-icon\\"></b>
             </span>
             <br>
-            <span class='label'>my-icon</span>
+            <span class='codepoint'>3e8</span>
         </div>
 
 

src/generators/asset-types/__tests__/html.ts

@@ -5,6 +5,7 @@ const mockOptions = {
   name: 'test-font',
   prefix: 'tf',
   tag: 'b',
+  codepoints: { 'my-icon': 1000 },
   assets: { 'my-icon': null },
   templates: {
     html: resolve(__dirname, '../../../../templates/html.hbs')

src/generators/generator-options.ts

@@ -17,7 +17,7 @@ export const getGeneratorOptions = (
   assets: AssetsMap
 ): FontGeneratorOptions => ({
   ...options,
-  codepoints: getCodepoints(assets, options.codepoints),
+  codepoints: getCodepoints(assets, options.codepoints, options.startCodepoint),
   formatOptions: prefillOptions<AssetType, {}, FormatOptions>(
     Object.values(ASSET_TYPES),
     options.formatOptions,

src/types/runner.ts

@@ -13,6 +13,7 @@ export type RunnerOptionalOptions = {
   assetTypes: OtherAssetType[];
   formatOptions: FormatOptions;
   pathOptions: { [key in AssetType]?: string };
+  startCodepoint: number,
   codepoints: CodepointsMap;
   fontHeight: number;
   descent: number;

templates/html.hbs

@@ -30,7 +30,8 @@
             font-size: 40px;
             color: #333;
         }
-        .label {
+        .label,
+        .codepoint {
             display: inline-block;
             width: 100%;
             box-sizing: border-box;
@@ -40,6 +41,7 @@
             color: #666;
             white-space: nowrap;
             overflow: hidden;
+            vertical-align: top;
             text-overflow: ellipsis;
             background: #ddd;
             -webkit-border-radius: 0 0 3px 3px;
@@ -58,11 +60,13 @@
     {{# each assets }}
 
         <div class="preview">
+            <span class='label'>{{ @key }}</span>
+            <br>
             <span class="inner">
                 <{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}"></{{ ../tag }}>
             </span>
             <br>
-            <span class='label'>{{ @key }}</span>
+            <span class='codepoint'>{{ codepoint (lookup ../codepoints @key) }}</span>
         </div>
 
     {{/ each }}