CLI more options

[medeepaksaini]

Hey @jaywcjlove @btmurrell , can someone help me how i can modify npm cli command svgtofont --sources build/icons/svg --output ./font --fontName icons to get only font and less file not other files.

[jaywcjlove]

@medeepaksaini The configuration is added to package.json. Like this:

{
  ....
  "svgtofont": {
     "css": false,
     "website": false
  }
}

Upgrade + [email protected]

[medeepaksaini]

@jaywcjlove and what about if i want to get only scss file and basic font files not react file Or Other file.

[jaywcjlove]

svgtofont/src/utils.ts

Lines 197 to 204 in 3195dd6

	copy(inDir, outDir, vars, (err, createdFiles) => {
	if (err) reject(err);
	createdFiles.forEach(filePath =>
	console.log(`${color.green('SUCCESS')} Created ${filePath} `)
	);
	resolve(createdFiles);
	})
	});

@medeepaksaini I need to modify the copy-template-dir, which will take some time.

[medeepaksaini]

Okay, Thanks 🙂👍

[jaywcjlove]

@medeepaksaini You can delete unnecessary files after generation. Can use rimraf, Support CLI.

[medeepaksaini]

Okay

[medeepaksaini]

@jaywcjlove how i can change css file location ?

[jaywcjlove]

@medeepaksaini Can use move-file-cli

[jaywcjlove]

@medeepaksaini Upgrade + [email protected]

"svgtofont": {
  "website": false,
  "css": {
    "output": "css",
    "include": "\\.(css|less)$"
  }
},

[claudiuTicu]

Hi @jaywcjlove, great plugin, very useful i have a few questions:

for the css options, used like this:

"svgtofont": {
    "website": false,
    "css": {
      "output": "./src/scss/components/",
      "include": "\\.(scss)$"
    },
    "emptyDist": true
  },,

is there any way to specify the path for the generated fonts?

currently it is generated like this:

@font-face {font-family: "icons";
  src: url('icons.eot?t=1607280845895'); /* IE9*/
  src: url('icons.eot?t=1607280845895#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url("icons.woff2?t=1607280845895") format("woff2"),
  url("icons.woff?t=1607280845895") format("woff"),
  url('icons.ttf?t=1607280845895') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('icons.svg?t=1607280845895#icons') format('svg'); /* iOS 4.1- */
}

but i would need to generate them with a specific path, something like this:

@font-face {font-family: "icons";
  src: url('../fonts/icons/icons.eot?t=1607280845895'); /* IE9*/
  src: url('../fonts/icons/icons.eot?t=1607280845895#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url("../fonts/icons/icons.woff2?t=1607280845895") format("woff2"),
  url("../fonts/icons/icons.woff?t=1607280845895") format("woff"),
  url('../fonts/icons/icons.ttf?t=1607280845895') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../fonts/icons/icons.svg?t=1607280845895#icons') format('svg'); /* iOS 4.1- */
}

also, is there any way to specify the name of the output scss file? lets say i want to name it "_icons.scss" instead of "icons.scss" how is generated now.

Thank you in advance.

[jaywcjlove]

@claudiuTicu

"svgtofont": {
  "fontName": "icons",
  "website": false,
  "css": {
    "output": "./src/scss/components/",
    "cssPath": "../fonts/icons/",
    "include": "\\.(scss)$"
  },
  "emptyDist": true
},

"svgtofont": {
+  "fontName": "icons",
  "website": false,
  "css": {
    "output": "./src/scss/components/",
+    "cssPath": "../fonts/icons/",
    "include": "\\.(scss)$"
  },
  "emptyDist": true
},

[claudiuTicu]

Hi @jaywcjlove ,
Thank you for your quick answer the cssPath option woks perfectly, very nice, but regarding the fontName option, this one will rename all the files (font files) and also the class inside of scss.

I was expecting to have something like:

"svgtofont": {
  "fontName": "icons",
  "website": false,
  "css": {
    "output": "./src/scss/components/",
+    "cssName": "_icons",
    "include": "\\.(scss)$"
  },
  "emptyDist": true
},

which will output the _icons.scss file

[jaywcjlove]

@claudiuTicu Upgrade + [email protected]

"svgtofont": {
  "website": false,
  "css": {
    "output": "./src/scss/components/",
+   "fileName": "_icons",
+    "cssPath": "../fonts/icons/",
    "include": "\\.(scss)$"
  },
  "emptyDist": true
},

[claudiuTicu]

Perfect!!! Thank you very much!

[jaywcjlove]

Supports .svgtofontrc Configuration File.

{
  "src": "./icon",
  "dist": "./fonts",
  "fontName": "svgtofont",
  "css": true
}

Upgrade v3.16.3