feat: Add css.cssPath options. #48

jaywcjlove · Dec 7, 2020 · f79d0fd · f79d0fd
1 parent 473d1f3
commit f79d0fd
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 37 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -157,7 +157,7 @@ export default async (options: SvgToFontOptions = {}) => {
   options.classNamePrefix = options.classNamePrefix || options.fontName;
   const fontSize = options.css && typeof options.css !== 'boolean' && options.css.fontSize ? options.css.fontSize : '16px';
   // If you generate a font you need to generate a style.
-  if (options.website) options.css = true;
+  if (options.website && !options.css) options.css = true;
 
   try {
     if (options.emptyDist) {
@@ -194,7 +194,6 @@ export default async (options: SvgToFontOptions = {}) => {
     await createSvgSymbol(options);
 
     if (options.css) {
-      console.log('fontSize::', fontSize)
       await copyTemplate(path.resolve(__dirname, 'styles'), options.dist, {
         fontname: options.fontName,
         cssString: cssString.join(''),

diff --git a/src/styles/_{{fontname}}.css b/src/styles/_{{fontname}}.css
@@ -1,11 +1,11 @@
 @font-face {
   font-family: "{{fontname}}";
-  src: url('{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
-  src: url('{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
-  url("{{fontname}}.woff?t={{timestamp}}") format("woff"),
-  url('{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+  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- */
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {

diff --git a/src/styles/_{{fontname}}.less b/src/styles/_{{fontname}}.less
@@ -1,10 +1,10 @@
 @font-face {font-family: "{{fontname}}";
-  src: url('{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
-  src: url('{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
-  url("{{fontname}}.woff?t={{timestamp}}") format("woff"),
-  url('{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+  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- */
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {

diff --git a/src/styles/_{{fontname}}.module.less b/src/styles/_{{fontname}}.module.less
@@ -1,10 +1,10 @@
 @font-face {font-family: "{{fontname}}";
-  src: url('{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
-  src: url('{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
-  url("{{fontname}}.woff?t={{timestamp}}") format("woff"),
-  url('{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+  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- */
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {

diff --git a/src/styles/_{{fontname}}.scss b/src/styles/_{{fontname}}.scss
@@ -1,10 +1,10 @@
 @font-face {font-family: "{{fontname}}";
-  src: url('{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
-  src: url('{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
-  url("{{fontname}}.woff?t={{timestamp}}") format("woff"),
-  url('{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+  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- */
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {

diff --git a/src/styles/_{{fontname}}.styl b/src/styles/_{{fontname}}.styl
@@ -1,10 +1,10 @@
 @font-face {font-family: "{{fontname}}";
-  src: url('{{fontname}}.eot?t={{timestamp}}'); /* IE9*/
-  src: url('{{fontname}}.eot?t={{timestamp}}#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("{{fontname}}.woff2?t={{timestamp}}") format("woff2"),
-  url("{{fontname}}.woff?t={{timestamp}}") format("woff"),
-  url('{{fontname}}.ttf?t={{timestamp}}') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('{{fontname}}.svg?t={{timestamp}}#{{fontname}}') format('svg'); /* iOS 4.1- */
+  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- */
 }
 
 [class^="{{prefix}}-"], [class*=" {{prefix}}-"] {

diff --git a/src/utils.ts b/src/utils.ts
@@ -124,7 +124,7 @@ export function createEOT(options: SvgToFontOptions = {}, ttf: Buffer) {
         return reject(err);
       }
       console.log(`${color.green('SUCCESS')} ${color.blue('EOT')} font successfully created!\n  ╰┈▶ ${DIST_PATH}`);
-      resolve();
+      resolve(eot);
     });
   });
 };
@@ -141,7 +141,7 @@ export function createWOFF(options: SvgToFontOptions = {}, ttf: Buffer) {
         return reject(err);
       }
       console.log(`${color.green('SUCCESS')} ${color.blue('WOFF')} font successfully created!\n  ╰┈▶ ${DIST_PATH}`);
-      resolve();
+      resolve(woff);
     });
   });
 };
@@ -158,7 +158,9 @@ export function createWOFF2(options: SvgToFontOptions = {}, ttf: Buffer) {
         return reject(err);
       }
       console.log(`${color.green('SUCCESS')} ${color.blue('WOFF2')} font successfully created!\n  ╰┈▶ ${DIST_PATH}`);
-      resolve();
+      resolve({
+        path: DIST_PATH
+      });
     });
   });
 };
@@ -186,7 +188,10 @@ export function createSvgSymbol(options: SvgToFontOptions = {}) {
         return reject(err);
       }
       console.log(`${color.green('SUCCESS')} ${color.blue('Svg Symbol')} font successfully created!\n  ╰┈▶ ${DIST_PATH}`);
-      resolve();
+      resolve({
+        path: DIST_PATH,
+        svg: $.html("svg")
+      });
     });
   });
 };
@@ -204,6 +209,11 @@ export type CSSOptions = {
    * Setting font size.
    */
   fontSize?: string;
+  /**
+   * Set the path in the css file
+   * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
+   */
+  cssPath?: string
 }
 
 /**
@@ -212,7 +222,10 @@ export type CSSOptions = {
 export function copyTemplate(inDir: string, outDir: string, { _opts, ...vars }: Record<string, any> & { _opts: CSSOptions}) {
   const removeFiles: Array<string> = [];
   return new Promise((resolve, reject) => {
-    copy(inDir, outDir, vars, async (err, createdFiles) => {
+    copy(inDir, outDir, {
+      cssPath: _opts.cssPath || '',
+      ...vars
+    }, async (err, createdFiles) => {
       if (err) reject(err);
       createdFiles = createdFiles.map(filePath => {
         if (_opts.include && (new RegExp(_opts.include)).test(filePath) || !_opts.include) {