bug: svg "sprites" are broken when using svgo

[tomcru]

bug: svg "sprites" are broken when using svgo

[KTibow]

As SVGO caters to standalone SVGs, this isn't a bug, but SVGO working as intended - removing unused definitions. However you can customize SVGO to disable that behavior, by turning off removeHiddenElems and cleanupIds, as these both have the sole purpose to optimize defs within the SVG.

[KTibow]

This issue is caused by either cleanupIds or removeHiddenElems

[KTibow]

What is the original SVG's purpose? It seems to be to define things, as it renders nothing. How is it being used?

[tomcru]

It is used as a Sprite sheet (instead of requesting a lot of icons on a page, we can just request this file once and pick the item out of it with <use>).

It is for all icons here:
https://main.gamegator.net/games/starfield
These, for example:

Example on how it is used in a React component:

import { VariantProps, cva, cx } from 'class-variance-authority';
import { ComponentPropsWithoutRef } from 'react';
import { Sprite } from '../../../common/types/Sprite';

const styles = cva('', {
  variants: {
    color: {
      primary: 'text-icon-primary',
      secondary: 'text-icon-secondary',
      tertiary: 'text-icon-tertiary',
      success: 'text-icon-success',
      'on-color': 'text-icon-on-color',
      'on-color-inverse': 'text-icon-on-color-inverse',
      error: 'text-icon-error',
      none: '',
    },
  },
  defaultVariants: {
    color: 'none',
  },
});

type Props = {
  path: Sprite;
  className?: string;
  width?: number;
  height?: number;
  style?: Omit<ComponentPropsWithoutRef<'svg'>['style'], 'width' | 'height'>;
} & VariantProps<typeof styles>;

export function Icon({
  path,
  className,
  width,
  height,
  style,
  ...props
}: Props): JSX.Element {
  /** helper to find broken icons */
  if (!path) {
    return <div className="block h-24 w-24 bg-button-danger"></div>;
  }
  const [type, name] = path.split('/');

  return (
    <svg
      className={cx(styles(props), className)}
      style={{
        width: `${width}px`,
        height: `${height}px`,
        ...style,
      }}
    >
      <use href={`/sprites/${type}.svg#${name}`} />
    </svg>
  );
}

[tomcru]

You can basically render the elements inside defs with a # and the id of it, like /sprites/regions.svg#LatinAmerica

[tomcru]

Thank you, this was indeed the case - had to disable both removeHiddenElems & cleanupIds.

module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeHiddenElems: false,
          cleanupIds: false,
        },
      },
    },
  ],
};