feat: created new templates for ligatures (#146)

* created new templates for ligatures * accidently commented out tests Co-authored-by: brandon <brandon@drivantage.com>
jaywcjlove · Nov 28, 2021 · dfa211f · dfa211f
1 parent 7143984
commit dfa211f
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svgtofont",
-  "version": "3.13.0",
+  "version": "3.13.1",
   "description": "Converts SVG to TTF/EOT/WOFF/WOFF2/SVG format fonts.",
   "homepage": "https://jaywcjlove.github.io/svgtofont/",
   "main": "lib/index.js",

diff --git a/src/index.ts b/src/index.ts
@@ -77,7 +77,7 @@ export type SvgToFontOptions = {
    * should the name(file name) be used as unicode? this switch allows for the support of ligatures.
    * @default false
    */
-   useNameAsUnicode?: boolean;
+  useNameAsUnicode?: boolean;
   /**
    * Clear output directory contents
    * @default false
@@ -189,35 +189,50 @@ export default async (options: SvgToFontOptions = {}) => {
     let cssIconHtml: string[] = [];
     let unicodeHtml: string[] = [];
     let symbolHtml: string[] = [];
+    const prefix = options.classNamePrefix || options.fontName;
+
     Object.keys(unicodeObject).forEach(name => {
-      let _code = unicodeObject[name];
-      cssIconHtml.push(`<li class="class-icon"><i class="${options.classNamePrefix}-${name}"></i><p class="name">${name}</p></li>`);
-      unicodeHtml.push(`<li class="unicode-icon"><span class="iconfont">${_code}</span><h4>${name}</h4><span class="unicode">&amp;#${_code.charCodeAt(0)};</span></li>`);
+      const _code = unicodeObject[name];
+      let symbolName = options.classNamePrefix + '-' + name
+      let iconPart = symbolName + '">';
+      let encodedCodes: string | number = _code.charCodeAt(0);
+
+      if (options.useNameAsUnicode) {
+        symbolName = name;
+        iconPart = prefix + '">' + name;
+        encodedCodes = _code.split('').map(x => x.charCodeAt(0)).join(';&amp;#');
+      } else {
+        cssString.push(`.${symbolName}:before { content: "\\${encodedCodes.toString(16)}"; }\n`);
+        cssToVars.push(`$${symbolName}: "\\${encodedCodes.toString(16)}";\n`);
+      }
+
+      cssIconHtml.push(`<li class="class-icon"><i class="${iconPart}</i><p class="name">${name}</p></li>`);
+      unicodeHtml.push(`<li class="unicode-icon"><span class="iconfont">${_code}</span><h4>${name}</h4><span class="unicode">&amp;#${encodedCodes};</span></li>`);
       symbolHtml.push(`
         <li class="symbol">
           <svg class="icon" aria-hidden="true">
-            <use xlink:href="${options.fontName}.symbol.svg#${options.classNamePrefix}-${name}"></use>
+            <use xlink:href="${options.fontName}.symbol.svg#${symbolName}"></use>
           </svg>
-          <h4>${options.classNamePrefix}-${name}</h4>
+          <h4>${symbolName}</h4>
         </li>
       `);
-      cssString.push(`.${options.classNamePrefix}-${name}:before { content: "\\${_code.charCodeAt(0).toString(16)}"; }\n`);
-      cssToVars.push(`$${options.classNamePrefix}-${name}: "\\${_code.charCodeAt(0).toString(16)}";\n`);
     });
+
     const ttf = await createTTF(options);
     await createEOT(options, ttf);
     await createWOFF(options, ttf);
     await createWOFF2(options, ttf);
     await createSvgSymbol(options);
 
     if (options.css) {
-      await copyTemplate(options.styleTemplates || path.resolve(__dirname, 'styles'), options.dist, {
+      const styleTemplatePath = options.styleTemplates || (!options.useNameAsUnicode ? path.resolve(__dirname, 'styles') : path.resolve(__dirname, 'ligature-styles'));
+      await copyTemplate(styleTemplatePath, options.dist, {
         fontname: options.fontName,
         cssString: cssString.join(''),
         cssToVars: cssToVars.join(''),
         fontSize: fontSize,
         timestamp: new Date().getTime(),
-        prefix: options.classNamePrefix || options.fontName,
+        prefix,
         _opts: typeof options.css === 'boolean' ? {} : { ...options.css }
       });
     }

diff --git a/src/ligature-styles/_{{filename}}.css b/src/ligature-styles/_{{filename}}.css
@@ -0,0 +1,17 @@
+@font-face {
+  font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;
+  font-size:{{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/ligature-styles/_{{filename}}.less b/src/ligature-styles/_{{filename}}.less
@@ -0,0 +1,16 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;
+  font-size: {{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/ligature-styles/_{{filename}}.module.less b/src/ligature-styles/_{{filename}}.module.less
@@ -0,0 +1,16 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;
+  font-size:{{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/ligature-styles/_{{filename}}.scss b/src/ligature-styles/_{{filename}}.scss
@@ -0,0 +1,16 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;
+  font-size: {{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/ligature-styles/_{{filename}}.styl b/src/ligature-styles/_{{filename}}.styl
@@ -0,0 +1,16 @@
+@font-face {font-family: "{{fontname}}";
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
+  src: url('{{cssPath}}{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("{{cssPath}}{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
+  url("{{cssPath}}{{fontname}}.woff?t={{timestamp}}") format("woff"),
+  url('{{cssPath}}{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('{{cssPath}}{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+}
+
+.{{prefix}} {
+  font-family: '{{fontname}}' !important;
+  font-size: {{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/test/index.test.ts b/test/index.test.ts
@@ -145,3 +145,39 @@ it('templates simple test case.', async () => {
   expect(css.toString().indexOf('Hello CSS!') > -1).toBeTruthy();
   await fs.emptyDir(dist);
 });
+
+it('example simple test case for useNameAsUnicode.', async () => {
+  const dist = path.resolve(process.cwd(), 'test', 'example', 'dist');
+  await fs.emptyDir(dist);
+  await svgtofont({
+    src: path.resolve(process.cwd(), 'test', 'example', 'svg'),
+    dist: dist,
+    fontName: 'nameAsUnicode',
+    css: false,
+    classNamePrefix: 'my-icons',
+    useNameAsUnicode: true,
+    emptyDist: true,
+    typescript: true,
+  });
+  const fileNames = await fs.readdir(dist);
+  expect(fileNames).toEqual([
+    'nameAsUnicode.css',
+    'nameAsUnicode.d.ts',
+    'nameAsUnicode.eot',
+    'nameAsUnicode.less',
+    'nameAsUnicode.module.less',
+    'nameAsUnicode.scss',
+    'nameAsUnicode.styl',
+    'nameAsUnicode.svg',
+    'nameAsUnicode.symbol.svg',
+    'nameAsUnicode.ttf',
+    'nameAsUnicode.woff',
+    'nameAsUnicode.woff2',
+  ]);
+  const css = await fs.readFile(path.resolve(dist, 'nameAsUnicode.css'));
+  // should contain a class with the prefix or the font name, in this case we provided a prefix so we should get that
+  expect(css.toString().indexOf('.my-icons') > -1).toBeTruthy();
+  // should not contain any variables
+  expect(css.toString().indexOf('$') === -1).toBeTruthy();
+  await fs.emptyDir(dist);
+});