Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clarify use with SVGO? #99

Closed
peteruithoven opened this issue Nov 6, 2023 · 0 comments · Fixed by #100
Closed

Clarify use with SVGO? #99

peteruithoven opened this issue Nov 6, 2023 · 0 comments · Fixed by #100

Comments

@peteruithoven
Copy link
Contributor

peteruithoven commented Nov 6, 2023

The use of SVGO with SVGR and this plugin seems somewhat undocumented.

It seems enabled by default:
https://react-svgr.com/docs/options/#svgo

There is no mention of needing to add a plugin.

Only after I found this comment to add a plugins list to the svgrOptions object and installing @svgr/plugin-svgo it started working.

plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'] 

I assume every thing under svgrOptions should be documented on the following page, but no plugins option is mentioned. Nor is it mentioned that the svgo plugin needs to be explicitly included. I understand this is our of control of this project. (I've also opened gregberge/svgr#919)
https://react-svgr.com/docs/options/

Seeing there are at least 2 issues (#7, #49, #52), open where people are confused maybe add an example to this project's readme?
https://github.com/pd4d10/vite-plugin-svgr

Full example:

// vite.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    // https://github.com/pd4d10/vite-plugin-svgr#options
    svgr({
      svgrOptions: {
        plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
        svgoConfig: {
          // https://github.com/svg/svgo/blob/main/plugins/cleanupNumericValues.js#L32
          floatPrecision: 2,
        },
      },
    }),
  ],
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant