add svgo

[KubaJastrz]

Fixes #7

Description

Add SVGO for svg optimizations.

Type of change

Please mark relevant options with an x in the brackets.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Algorithm update - updates algorithm documentation/questions/answers etc.
• Other (please describe):

How Has This Been Tested?

Tested against the remix-vite test app with basic-shapes.svg and looking at the output.

• Integration tests
• Unit tests
• Manual tests
• No tests required

Reviewer checklist

Mark everything that needs to be checked before merging the PR.

• Check if the UI is working as expected and is satisfactory
• Check if the code is well documented
• Check if the behavior is what is expected
• Check if the code is well tested
• Check if the code is readable and well formatted
• Additional checks (document below if any)

Screenshots (if appropriate):

Questions (if appropriate):

[KubaJastrz]

without this, svgo would yell at me

SvgoParserError: <input>:2:24: Unbound namespace prefix: "xlink"

[AlemTuzlak]

I'll need to take a deeper dive into this PR before I merge it in, so what will svgo do by default here when ran alongside the plugin?

[KubaJastrz]

With this error? Crash the plugin and build sadly :/

[AlemTuzlak]

Sorry, maybe leaving a comment here specifically was a bad idea, this was more of a general question of what will happen when I merge this PR?

[KubaJastrz]

Svgo is an svg minification tool. This implementation will optimize each svg file individually right before it's being included in the spritesheet as a symbol.

Users can opt-out of Svgo or customize its config by passing the options through the plugin config. I don't know if Svgo can pick up the default svgo.config.js, will have to check.

[silvenon]

I think this change is good because using xlink:href inside an <svg> element that doesn't have xmlns:xlink is probably invalid, that's why SVGO was complaining.

[silvenon]

Suggestion for an alternative API:

Suggested change

	svgo?: {
	enabled?: boolean;
	options?: SvgoConfig;
	};
	svgo?: boolean | SvgoConfig

to simplify, and also eliminate this impossible state:

{
  svgo: {
    enabled: false,
    options: {
      // ...
    }
  }
}

[KubaJastrz]

Thanks, that's a pretty good idea

[silvenon]

However, I don't know how much you'd be gaining from SVGO in this situation, published icons are probably already optimized. Although many are exported from Figma, so those aren't optimized, for them it might be good to optimize.

Also, here you're running SVGO for each icon, and for performance SVGO might be best run once per entire SVG sprite (with special care for default options like cleanupIds), but that seems like a job better suited for vite-plugin-svgo for people to do it at their own risk. I don't know whether it's worth it to include SVGO as a dependency of this plugin.

Anyway, that's all from me.