Failed svg to ts conversion

[kreuzerk]

Failed svg to ts conversion

[kreuzerk]

Hi @dsebastien thanks for the great description and the reproduction steps. I created a local project to reproduce your issue. For me everything worked fine with the default svgoConfig of svg-to-ts. The cleanupAttrs cleans removes the color from your svg icon.

I used the following config which worked:

"svg-to-ts": {
    "srcFiles": [
      "./libs/web-icons/icons/**/*.svg"
    ],
    "outputDirectory": "./libs/web-icons/src/lib",
    "interfaceName": "DidowiIcon",
    "typeName": "DidowiIconName",
    "prefix": "didowiIcon",
    "optimizeForLazyLoading": true,
    "modelFileName": "didowi-icon.model",
    "additionalModelFile": "./libs/web-icons/src/lib",
    "iconsFolderName": "generated",
    "delimiter": "SNAKE",
    "compileSources": false
  },

When I copied the data from the generated svg and opened it in a browser I got like three pink stripes under each other.

[kreuzerk]

Please let me know if this works for you.

[dsebastien]

Hello @kreuzerk

Indeed, you're right! I've verified and indeed, the SVG data is correct, our issue must be elsewhere; might be a CSS issue after all.

I wrongly assumed there was a conversion issue because I didn't find the elements of the SVG, but I suppose it is due to the compression that is done during conversion.

Sorry for the waste of time, and thanks for looking into this (and for creating this super useful tool! :p)

[dsebastien]

It seems that my issue is caused by the fact that the icons I'm now converting have a fill color (white in the example above), while the ones I was using earlier from Angular material had fill="none":

I could work around it using svgo plugins, but I still have an issue with the shape itself. Apparently the icon above's rectangle goes out of the bounds of the svg visible space.

By default I set the svg element to be 24x24px, but the rectangle is bigger than that.

Oh my this is complicated.... :D