nuxt / nuxt/icon

[Bug] Do not strip custom local icons of their classes

Open
#210 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

upstream
Dominant language
TypeScript
Stars
1.2k
Forks
96
Avg merge
8h 12m
Merged PRs (30d)
2

Description

I noticed a behavior that I consider a bug, but I'm not sure if this is wanted.

Anyway, I noticed that when using custom local icons, i.e. loaded from the assets folder, classes applied to their root svg element are stripped when the icon is actually loaded in the template.

This is not really a good behavior, because some classes could be used to apply animations to the said icon, and removing them will cause them to not be animated.

I prepared a simple reproduction here https://github.com/stefanobartoletti/icon-test, everything should be pretty much self-explanatory, but right now, the SVG icon directly pasted into the template can be animated via the custom icon-animation class, while the same SVG loaded with the Icon component cannot, because it is stripped of the said class.

A possible workaround right now could be to give this class to the Icon component, instead of the source SVG icon, but this is not optimal, since the same exact icon could be needed in many places in a project and it would make sense to give this class only once to the source, instead of needing to apply it to every and each instance of the Icon component using it.

Also, I noticed that the classes are stripped only from the root svg element, if you have classes in nested g or path elements, they remain in place.

Hopefully it is all clear, anyway, feel free to ask for more info if needed.


Edit:

I forgot to add that I'm talking about a configuration using the svg mode to load icons, where the source icon is inlined in the template.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Icon component's custom local-icon loading path in svg mode and reproduce the behavior using the linked icon-test project and an SVG from the assets folder. Trace how the root SVG is inlined and compare it with nested g or path elements. Done means classes on the source SVG root remain present when the icon is rendered and the reproduction's animation works.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.