Generate styles with sprite dimensions

[keasy9]

It will be usefull to generate css, less or any other stylesheet for sprites, for e.g.:

icon--arrow {
    width: 32px;
    height: 64px;
}

where width and height based on svg size attributes or viewBox.

The problem for me is that when inserting sprites via the <use> tag, it has default SVG dimensions (300*150) no matter what size the icon is, so I need to manually write the dimensions for each icon in my stylesheets.

If this feature is welcomed, I may try to do some PR.

[carloitaben]

I encountered the same problem with this library and svg-icons-cli. For my use case, a more flexible option was to generate an object that maps icon names to their viewBox. In my custom <Icon /> component, I do something like this:

import { nameToViewBoxMap } from "~/generated/icons.ts"
import spriteHref from "~/path/sprite.svg"
import type { SVGProps } from "react"
import type { IconName } from "~/path/types.ts"

export function Icon({
  name,
  ...props
}: SVGProps<SVGSVGElement> & {
  name: IconName
}) {
  return (
    <svg viewBox={nameToViewBoxMap[name]} {...props}>
      <use href={`${spriteHref}#${name}`} />
    </svg>
  )
}

Using viewBox instead of generating CSS with width and height was more flexible for my use case because the viewBox provides only the aspect ratio. It allows the consumer of the component to set their desired size.

<Icon name="plus" className="size-6" /> // 24px
<Icon name="plus" className="size-12" /> // 48px

So yeah, it would be great to have a way to "hook" into the icon processing pipeline and be able to do something with the processed icon. This would enable both use cases: you could generate CSS, and I could create the nameToViewBoxMap object 🙂