How to use svg sprites?

[Karina1703]

I would like something like that

import Sprite from "../../../public/sprite.svg";

const page = () => {
  return (
    <div>
      <Sprite />

      <svg>
        <use href={`#like`} />
      </svg>

    </div>
  );
};

But this doesn't work

[gregberge]

It is not supported.

[zousandian]

For anyone encountering the same issue, SVGO removes SVG defs by default. You can override the svgoConfig to make it work.

FYI： https://github.com/svg/svgo/issues/1896#issuecomment-1866798474

vite config example:

import svgr from '@svgr/rollup';

...
  plugins: [
     svgr({
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeHiddenElems: false,
                  cleanupIds: false,
                },
              },
            },
          ],
        },
      }),
 ],
...