code-forge-io / code-forge-io/vite-plugin-icons-spritesheet

ClipPath is not scoped to <symbol>

Open
#38 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
175
Forks
12
PR merge metrics
No merged PRs in 30d

Description

This is an excellent plugin!

One issue I noticed is the lack of support for `clip-path` for example as those are referenced within SVG files via id.

[Example from MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/clipPath)
```svg

```

Having multiple files that provide `` means that those lines of code exist multiple times and have naming conflicts as the `id` stays the same. The spritesheet will now use the first id it encounters instead of the one defined here.

The SVG optimizer [svgo](https://svgo.dev/) ([online UI](https://jakearchibald.github.io/svgomg/)) automatically uses names like `#a` for any clip path.

## Expected Result

Rename all `id` and references to something unique, like `$filename-$id`

Currently solveable by manually preparing the file

Contributor guide

No contributing guide indexed for this repository

Research direction

No source file or test is named. Trace the plugin's SVG spritesheet processing and how IDs and references are preserved across files, then reproduce the supplied clipPath/use example with duplicate IDs. Done means each file's IDs and all corresponding references are unique in the generated spritesheet.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.