nivekcode/svg-to-ts

`svg-to-ts-files` always generate a single file

Closed this issue · 2 comments

MathieuUrstein commented

The sample output from you documentation (here) shows that svg-to-ts-files splits icons into multiple files. Here is what I get:

Node: 14.19.3
svg-to-ts: 8.9.0
Config: .svg-to-tsrc

{
  "srcFiles": ["./inputfiles/*.svg"],
  "outputDirectory": "./dist",
  "interfaceName": "UntitledIcon",
  "typeName": "untitledIcon",
  "prefix": "untitledIcon",
  "fileName": "untitled-icons.model",
  "compileSources": false,
  "tsx": true,
  "generateType": true,
  "exportCompleteIconSet": true
}

command: npx svg-to-ts svg-to-ts-files
input:
image
output: untitled-icons.model.tsx

/* 🤖 this file was generated by svg-to-ts */
export const UntitledIconAlertCircle = (props) => (<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path opacity=".4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>);export const UntitledIconAlertHexagon = (props) => (<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}><path opacity=".4" d="M11.223 2.432c.284-.158.425-.237.575-.267a1 1 0 0 1 .403 0c.15.03.292.11.576.267l7.4 4.11c.3.167.45.25.558.369a1 1 0 0 1 .215.364c.05.153.05.324.05.667v8.117c0 .342 0 .514-.05.666a.999.999 0 0 1-.215.364c-.109.119-.258.202-.558.368l-7.4 4.111c-.284.158-.425.237-.575.268a.998.998 0 0 1-.403 0c-.15-.031-.292-.11-.576-.268l-7.4-4.11c-.3-.167-.45-.25-.558-.369a1 1 0 0 1-.215-.364C3 16.573 3 16.401 3 16.06V7.942c0-.343 0-.514.05-.667a1 1 0 0 1 .215-.364c.109-.119.258-.202.558-.368l7.4-4.111Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 8v4m0 4h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>);export const completeIconSet = [UntitledIconAlertCircle,UntitledIconAlertHexagon];

I tried to toggle all of those boolean with no success: compileSources, tsx, generateType, exportCompleteIconSet. Also, compileSources: true does not generate js files with type definitions. It has no impact for me.

PS:

  • npx svg-to-ts svg-to-ts-files --help does not provide help (as the documentation suggest) but runs the bundle script
  • The default input path is *.svg which does not look into the predefined inputfiles folder which is weird. Would ./inputfiles/**/*.svg or even ./**/*.svg be a better default?
  • You may want to precise the compatible node versions because I tried with node 16 and node 18 and got could not determine executable to run
  • Thanks for your help and the excellent library :)
MathieuUrstein commented

Ok it looks like npx svg-to-ts svg-to-ts-files actually uses npx svg-to-ts svg-to-ts-constants. I did npx ts-node ./src/bin/svg-to-ts-files.ts to test and I have what seems to be the right result:
image

I don't have more time to investigate right now but it looks much better 😀 (it may also be related to the could not determine executable to run issue mentioned earlier)

nivekcode commented

Can you try to run npx -p svg-to-ts svg-to-ts-files? That should work. I will close this issue for now. Please let me know if the error still persists.