feat: add SVGO for SVG optimization in component creation

[arashsheyda]

Summary

POC

SVGO is a tool for SVG optimization. the current bundle size optimization is not that noticeable: 6.2 mb but with more optimization coming (e.g. file chinking, type generating and using terser as minifier) we will be able to reduce it to 2.8mb (svgo used) or 3.6mb (without svgo), so I think this would be a nice edition.

note: the current bundle size (without any optm.) is 6.9mb

!IMPORTANT: This change updates the SVG path data to an optimized equivalent. It does not introduce any visual or behavioural differences, the icon renders identically. The update only reduces and simplifies the underlying SVG path syntax

[adamdehaven]

How does it change icons with an internal gradient?

What about the dynamic icon ids?

[arashsheyda]

How does it change icons with an internal gradient?

this I don't know, will take a look

What about the dynamic icon ids?

@Justineo suggested something for this, we'd need to implement that

[adamdehaven]

What about the dynamic icon ids?

@Justineo suggested something for this, we'd need to implement that

He mentioned a way to refactor the entire repo -- why would the dynamic ids need to change in this pull request?

[adamdehaven]

!IMPORTANT: This change updates the SVG path data to an optimized equivalent. It does not introduce any visual or behavioural differences

You mentioned you don't know how the icons with gradients, animations, etc. render here, so I'm not sure this statement in the PR description is accurate yet.

[arashsheyda]

You mentioned you don't know how the icons with gradients, animations, etc. render here, so I'm not sure this statement in the PR description is accurate yet.

not exactly, I know that it does not break the original if we have svg id="paint0_linear" fill="url(#paint0_linear)" it would change it to id="a" fill="url(#a)" which might break host app if we were referencing to the gradient in css or js, the icon itself is fine. to my knowledge from what I read in the docs, it doesn't break our svgs (and I've checked on the sandbox, everything is working) and we can change the configuration as needed, ex:

{ name: 'cleanupIds', params: { minify: false } }, // keep gradient IDs stable
{ name: 'removeUselessDefs', active: false },      // don’t delete gradients
{ name: 'mergeGradients', active: false },         // don’t merge
{ name: 'removeUnknownsAndDefaults', active: false } // preserve gradientUnits