svg-sprites does not contain sprite files

[David Tong]

Hello, first of all, thanks for the great work.

I would like to consume SVG icons in a sprite such that I don't get the entire collection of react-icons loaded into my application. I looked at #328 by @thure and @tomi-msft , and I do not understand why all the icons are made into one sprite PER icon. There are 14K sprites in the output. This defeats the purpose of creating sprites as they aren't much different than individual icons.

The example from @fluentui/svg-sprites/README.md also doesn't seem to use any real sprite:

export const Icon = (props: IconProps) => {
  const { icon, variant = 'regular', size = 20 } = props
  const assetId = `${icon}_${size}_${variant}`
  return (
    <svg>
      <use href={`/sprites/${assetId}.sprite.svg#${assetId}`} />
    </svg>
  )
}

The assetId is unique per icon/size/variant. That's again not different than using individual icons.

Any tips on how I should proceed with using sprites for icons in my project?

Thanks!

[Eddie Liu]

I'm experiencing the same issue. I'm not sure how to actually use this as an svg sprite.. I think you have to run one of the npm scripts.

However, when I try to run npm run build I get this error.

[Will Shown]

Hi @davidtong and @leddie24, I'm the author of @fluentui/svg-sprites. I understand your confusion; I wasn’t able to make this package as ergonomic as I’d hoped before I no longer had the bandwidth to continue contributing.

why all the icons are made into one sprite PER icon

The per-icon sprites are effective for projects that want to use a CDN like JSDelivr with minimal config to achieve reasonable caching and avoid listing this package as a dependency, the caveat being the UA needs to make lot of requests and usually the app needs to proxy those requests.

how to actually use this as an svg sprite

If you want to bundle multiple icons into the same sprite, you just need to modify the sprites script (https://github.com/thure/fluentui-system-icons/blob/master/packages/svg-sprites/package.json#L17) of this package to call svgstore not on all icons in the collection but on the particular set of icons your project needs.

The CLI documentation for svgstore is available here: https://github.com/svgstore/svgstore-cli#readme

e.g. "sprites": "mkdir ./sprites && svgstore -o ./sprites/mysprite.svg ./icons/icon1.svg ./icons/icon2.svg"

[Will Shown]

@leddie24

when I try to run npm run build I get this error

It looks like paths didn't resolve correctly when you ran this — importer/generate.js is part of the source code of this repository: https://github.com/microsoft/fluentui-system-icons/blob/main/importer/generate.js

Make sure when you run this package’s scripts, paths resolve relative to this package’s root.

[David Tong]

Thanks, @thure. I will look into the pointers you provided. For now, my project will likely use individual React components that we selectively import, but we will revisit the SVG approach in the future.