feat: add support to custom template path with te property styleTemplates, and the ability to use the .template extension to avoid highlight errors in editors

.editorconfig

@@ -0,0 +1,5 @@
+root = true
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2

.gitignore

@@ -2,6 +2,7 @@
 # Edit at https://www.gitignore.io/?templates=node
 
 test/example/dist
+test/templates/dist
 lib
 package-lock.json
 __snapshots__
@@ -111,4 +112,4 @@ typings/
 *.iml
 *.ipr
 *.iws
-.idea/
+.idea/

README.md

@@ -84,6 +84,7 @@ const path = require("path");
 svgtofont({
   src: path.resolve(process.cwd(), "icon"), // svg path
   dist: path.resolve(process.cwd(), "fonts"), // output path
+  styleTemplates: path.resolve(rootPath, "styles"), // file templates path (optional)
   fontName: "svgtofont", // font name
   css: true, // Create CSS files.
   startUnicode: 0xea01, // unicode start number
@@ -230,10 +231,18 @@ Clear output directory contents
 ### fontName
 
 > Type: `String`  
-> Default value: `iconfont`  
+> Default value: `iconfont`
 
 The font family name you want.
 
+### styleTemplates
+
+> Type: `String`
+> Default value: `undefined`
+
+The path of the file templates, see `src/styles` or `test/templates/styles` to get reference about 
+  how to create a template, file names can have the extension .template, like a `filename.scss.template`
+
 ### startUnicode
 
 > Type: `Number`  

package.json

@@ -15,6 +15,7 @@
     "build:ts": "tsbb build",
     "build:types": "tsbb types",
     "example": "node test/example/index.js",
+    "example:templates": "node test/templates/index.js",
     "pretest": "npm run example",
     "test": "tsbb test",
     "coverage": "npm run example && tsbb test --coverage"

src/index.ts

@@ -62,6 +62,10 @@ export type SvgToFontOptions = {
    * @default fontName
    */
   classNamePrefix?: SvgToFontOptions['fontName'];
+  /**
+  * Directory of custom templates.
+  */
+  styleTemplates?: string;
   /**
    * unicode start number
    * @default 10000
@@ -194,7 +198,7 @@ export default async (options: SvgToFontOptions = {}) => {
     await createSvgSymbol(options);
 
     if (options.css) {
-      await copyTemplate(path.resolve(__dirname, 'styles'), options.dist, {
+      await copyTemplate(options.styleTemplates || path.resolve(__dirname, 'styles'), options.dist, {
         fontname: options.fontName,
         cssString: cssString.join(''),
         cssToVars: cssToVars.join(''),

src/utils.ts

@@ -213,12 +213,16 @@ export type CSSOptions = {
    * Set the path in the css file
    * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
    */
-  cssPath?: string
+  cssPath?: string;
   /**
    * Set file name
    * https://github.com/jaywcjlove/svgtofont/issues/48#issuecomment-739547189
    */
-  fileName?: string
+  fileName?: string;
+  /**
+  * Setting class name.
+  */
+  className?: string;
 }
 
 /**
@@ -243,6 +247,11 @@ export function copyTemplate(inDir: string, outDir: string, { _opts, ...vars }:
       if (removeFiles.length > 0) {
         await del([...removeFiles]);
       }
+      createdFiles = await Promise.all(createdFiles.map(async (file) => {
+        const changedFileName = file.replace('.template', '');
+        await moveFile(file, changedFileName);
+        return changedFileName;
+      }));
       if (_opts.output) {
         const output = path.join(process.cwd(), _opts.output);
         await Promise.all(createdFiles.map(async (file) => {

test/index.test.ts

@@ -25,3 +25,28 @@ it('Support Less/Sass/Stylus.', async () => {
     expect(dir.length).toEqual(16);
   }
 });
+
+it('Support templates.', async () => {
+  const dir = await fs.readdir(path.join(__dirname, 'example', 'dist'));
+  if (dir && Array.isArray(dir)) {
+    expect([...dir]).toEqual(
+      expect.arrayContaining([
+        expect.stringMatching(/svgtofont\.css$/),
+        expect.stringMatching(/svgtofont\.less$/),
+        expect.stringMatching(/svgtofont\.module\.less$/),
+        expect.stringMatching(/svgtofont\.scss$/),
+        expect.stringMatching(/svgtofont\.styl$/),
+        expect.stringMatching(/svgtofont\.json$/),
+        expect.stringMatching(/svgtofont\.ttf$/),
+        expect.stringMatching(/svgtofont\.eot$/),
+        expect.stringMatching(/svgtofont\.woff$/),
+        expect.stringMatching(/svgtofont\.woff2$/),
+        expect.stringMatching(/svgtofont\.symbol\.svg$/),
+        expect.stringMatching(/symbol.html$/),
+        expect.stringMatching(/font-class.html$/),
+        expect.stringMatching(/index.html$/),
+      ]),
+    );
+    expect(dir.length).toEqual(16);
+  }
+});

test/templates/index.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const svgtofont = require("../../lib");
+const pkg = require('../../package.json');
+
+const rootPath = path.resolve(process.cwd(), "test", "templates");
+
+svgtofont({
+  src: path.resolve(rootPath, "svg"), // svg path
+  dist: path.resolve(rootPath, "dist"), // output path
+  // emptyDist: true, // Clear output directory contents
+  styleTemplates: path.resolve(rootPath, "styles"),
+  fontName: "svgtofont", // font name
+  css: true, // Create CSS files.
+  outSVGReact: true,
+  outSVGPath: true,
+  startNumber: 20000, // unicode start number
+  svgicons2svgfont: {
+    fontHeight: 1000,
+    normalize: true
+  },
+  // website = null, no demo html files
+  website: {
+    // Add a Github corner to your website
+    // Like: https://github.com/uiwjs/react-github-corners
+    corners: {
+      url: 'https://github.com/jaywcjlove/svgtofont',
+      width: 62, // default: 60
+      height: 62, // default: 60
+      bgColor: '#dc3545' // default: '#151513'
+    },
+    index: "unicode", // Enum{"font-class", "unicode", "symbol"}
+    title: "svgtofont",
+    favicon: path.resolve(rootPath, "favicon.png"),
+    // Must be a .svg format image.
+    logo: path.resolve(rootPath, "svg", "git.svg"),
+    version: pkg.version,
+    meta: {
+      description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
+      keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
+    },
+    description: ``,
+    links: [
+      {
+        title: "GitHub",
+        url: "https://github.com/jaywcjlove/svgtofont"
+      },
+      {
+        title: "Feedback",
+        url: "https://github.com/jaywcjlove/svgtofont/issues"
+      },
+      {
+        title: "Font Class Demo",
+        url: "font-class.html"
+      },
+      {
+        title: "Symbol Demo",
+        url: "symbol.html"
+      },
+      {
+        title: "Unicode Demo",
+        url: "index.html"
+      }
+    ],
+    footerInfo: `Licensed under MIT. (Yes it's free and <a target="_blank" href="https://github.com/jaywcjlove/svgtofont">open-sourced</a>)`
+  }
+})
+.then(() => {
+  console.log("done!");
+});

test/templates/simple.js

@@ -0,0 +1,15 @@
+const svgtofont = require("../../");
+const path = require("path");
+
+const rootPath = path.resolve(process.cwd(), "test", "example");
+
+svgtofont({
+  src: path.resolve(rootPath, "svg"), // svg path
+  dist: path.resolve(rootPath, "dist"), // output path
+  fontName: "svgtofont", // font name
+  css: true, // Create CSS files.
+  startNumber: 20000, // unicode start number
+  emptyDist: true,
+}).then(() => {
+  console.log("done!!!!");
+});

test/templates/styles/_{{filename}}.css.template

@@ -0,0 +1,20 @@
+@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- */
+}
+
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+  font-family: '{{fontname}}' !important;
+  font-size:{{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+{{cssString}}

test/templates/styles/_{{filename}}.less.template

@@ -0,0 +1,18 @@
+@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- */
+}
+
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+  font-family: '{{fontname}}' !important;
+  font-size: {{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{cssString}}

test/templates/styles/_{{filename}}.module.less.template

@@ -0,0 +1,20 @@
+@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- */
+}
+
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+  font-family: '{{fontname}}' !important;
+  font-size:{{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:global {
+{{cssString}}
+}

test/templates/styles/_{{filename}}.scss.template

@@ -0,0 +1,19 @@
+@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- */
+}
+
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+  font-family: '{{fontname}}' !important;
+  font-size: {{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{cssString}}
+{{cssToVars}}

test/templates/styles/_{{filename}}.styl.template

@@ -0,0 +1,18 @@
+@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- */
+}
+
+[class^="{{prefix}}-"], [class*=" {{prefix}}-"] {
+  font-family: '{{fontname}}' !important;
+  font-size: {{fontSize}};
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{cssString}}

test/templates/svg/adobe.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="none" fill-rule="evenodd" transform="translate(-168 -1104)">
+    <path fill="#555" d="M14.8679444,3 L23,3 L23,22 L14.8679444,3 Z M1,3 L9.13847222,3 L1,22 L1,3 Z M8.44730556,18.1780547 L12.0030556,10.0019303 L17.1852778,21.9988073 L13.7896389,21.9988073 L12.2389444,18.1780547 L8.44730556,18.1780547 Z" transform="translate(168 1104)"/>
+  </g>
+</svg>

test/templates/svg/git.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path d="m2.6 10.59l5.78-5.79 1.69 1.7c-0.24 0.85 0.15 1.78 0.93 2.23v5.54c-0.6 0.34-1 0.99-1 1.73a2 2 0 0 0 2 2 2 2 0 0 0 2 -2c0-0.74-0.4-1.39-1-1.73v-4.86l2.07 2.09c-0.07 0.15-0.07 0.32-0.07 0.5a2 2 0 0 0 2 2 2 2 0 0 0 2 -2 2 2 0 0 0 -2 -2c-0.18 0-0.35 0-0.5 0.07l-2.57-2.57c0.26-0.93-0.22-1.95-1.15-2.34-0.43-0.16-0.88-0.2-1.28-0.09l-1.7-1.69 0.79-0.78c0.78-0.79 2.04-0.79 2.82 0l7.99 7.99c0.79 0.78 0.79 2.04 0 2.82l-7.99 7.99c-0.78 0.79-2.04 0.79-2.82 0l-7.99-7.99c-0.79-0.78-0.79-2.04 0-2.82z" fill="#e64a19"/>
+</svg>

test/templates/svg/stylelint.svg

@@ -0,0 +1,3 @@
+<svg width="256px" height="245px" viewBox="0 0 256 245" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <path d="M129.7408,243.648 C157.7408,143.5392 156.928,143.0848 177.1648,71.7056 L182.0288,74.5216 C184.6784,76.0384 186.8416,74.7904 186.8416,71.744 L186.8416,37.696 C192.2176,18.8928 196.416,4.352 197.6576,0 L219.5776,0 L256,33.728 L232.0768,54.4 L250.1696,73.9648 L130.944,243.648 C130.368,244.608 129.5552,244.3904 129.7408,243.648 L129.7408,243.648 Z M142.7648,27.8656 C143.8528,27.8656 144.7232,28.4608 144.7232,29.2096 L144.7232,46.6496 C144.7232,47.3792 143.8464,47.9744 142.7648,47.9744 L113.3248,47.9744 C112.2368,47.9744 111.36,47.3792 111.36,46.6432 L111.36,29.1968 C111.36,28.4608 112.2368,27.8528 113.3184,27.8528 L142.7584,27.8528 L142.7648,27.8656 Z M179.1168,8.5504 L146.72,27.2512 C147.0912,27.8272 147.3216,28.4864 147.3216,29.2032 L147.3216,46.656 C147.3216,47.552 146.9632,48.3712 146.3872,49.024 L179.1104,67.9168 C181.3376,69.2096 183.168,68.1536 183.168,65.5808 L183.168,10.8928 C183.168,8.3136 181.3504,7.264 179.1168,8.5504 Z M108.7552,46.656 L108.7552,29.1968 C108.7552,28.48 108.9856,27.8208 109.3568,27.2512 L76.96,8.5376 C74.7328,7.2576 72.9024,8.3072 72.9024,10.88 L72.9024,65.568 C72.9024,68.1408 74.7328,69.1968 76.9664,67.904 L109.6832,49.0112 C109.1072,48.352 108.7616,47.5392 108.7616,46.6432 L108.7552,46.656 Z M125.056,243.648 L126.2592,243.648 C98.2656,143.5392 99.072,143.0848 78.8352,71.7056 L73.9712,74.5216 C71.328,76.0384 69.1584,74.7904 69.1584,71.744 L69.1584,37.696 C63.7824,18.8992 59.584,4.352 58.3424,0 L36.4288,0 L0,33.728 L23.9168,54.4 L5.824,73.9712 L125.056,243.648 Z M127.1104,84.4096 C131.995248,84.4096 135.9552,80.4496482 135.9552,75.5648 C135.9552,70.6799518 131.995248,66.72 127.1104,66.72 C122.225552,66.72 118.2656,70.6799518 118.2656,75.5648 C118.2656,80.4496482 122.225552,84.4096 127.1104,84.4096 Z M127.1104,136.9856 C131.995248,136.9856 135.9552,133.025648 135.9552,128.1408 C135.9552,123.255952 131.995248,119.296 127.1104,119.296 C122.225552,119.296 118.2656,123.255952 118.2656,128.1408 C118.2656,133.025648 122.225552,136.9856 127.1104,136.9856 Z M127.1104,189.5744 C131.995248,189.5744 135.9552,185.614448 135.9552,180.7296 C135.9552,175.844752 131.995248,171.8848 127.1104,171.8848 C122.225552,171.8848 118.2656,175.844752 118.2656,180.7296 C118.2656,185.614448 122.225552,189.5744 127.1104,189.5744 Z" fill="#000000" />
+</svg>