fix(icon): render non-path SVG primitives and preserve stroke caps/joins#6
Open
AsimNet wants to merge 1 commit intohugeicons:mainfrom
Open
fix(icon): render non-path SVG primitives and preserve stroke caps/joins#6AsimNet wants to merge 1 commit intohugeicons:mainfrom
AsimNet wants to merge 1 commit intohugeicons:mainfrom
Conversation
Two related bugs caused several Hugeicons to render incorrectly in Angular: 1. Non-path elements (`circle`, `ellipse`, `rect`, `line`, `polyline`, `polygon`) were rendered as empty `<path>` because `paths()` only extracted `d/fill/opacity/fillRule` and the template emitted a single `<path>` regardless of the source tag. Affects e.g. `CompassIcon` (the outer circle), `AlertCircleIcon` (the outer circle), `MapsLocation01Icon` (the inner pin dot). 2. `strokeLinecap` and `strokeLinejoin` were stripped from attrs. Several icons draw dots as near-zero-length paths (e.g. `Alert02Icon`'s exclamation dot is `M11.992 16H12.001`); without `stroke-linecap: round` the default `butt` linecap collapses them to nothing. Adds an `elementToPathD()` helper that converts each non-path SVG primitive into an equivalent path `d` string, and preserves linecap/linejoin (defaulting to `round`) when extracting attributes. The template already renders a single `<path>`, so no DOM-shape changes. Closes hugeicons#5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes two related bugs that cause several icons to render incorrectly when used via
<hugeicons-icon>. Closes #5.Bug 1 — Non-path SVG elements rendered as empty
<path>paths()only extractsd / fill / opacity / fillRuleand the template renders every entry as<path>. But many icons containcircle,ellipse,rect,line,polyline, orpolygon— these have nodattribute, so they collapse to empty<path d="">tags and disappear.Examples affected:
CompassIcon(outer circle),AlertCircleIcon(outer circle + dots),MapsLocation01Icon(inner pin dot).Bug 2 —
strokeLinecap/strokeLinejoinstrippedEven for icons that only contain
<path>elements, near-zero-length paths requirestroke-linecap: roundto render. The current code drops both attributes, so dots in icons likeAlert02Icon(the exclamation dot isM11.992 16H12.001) become invisible — defaultlinecap: buttcollapses them to nothing.Approach
elementToPathD(tag, attrs)helper that converts each non-path SVG primitive into an equivalent pathdstring (circle,ellipse,rect,line,polyline,polygon).strokeLinecapandstrokeLinejoinfrom the source attrs, defaulting both toroundwhen missing.The template still renders a single
<path>— no DOM-shape change, no breaking API change. Defaultroundlinecap/linejoin matches how the icons are rendered on hugeicons.com.Why this approach over native
<circle>/<ellipse>renderingA few previous comments on #5 suggested using
@switchto render native SVG tags. That's also valid but bloats the template significantly and changes the DOM structure. Converting to path data is a smaller surface change and preserves the existing rendering pipeline 1:1 — fewer chances of regressions.Test plan
pnpm buildpasses (verified locally)CompassIcon: outer circle now rendersAlertCircleIcon: outer circle + dots renderMapsLocation01Icon: inner pin dot renders<path>elements with non-zero-length pathsVerified on
Angular 19,
@hugeicons/angular@1.0.7source,@hugeicons-pro/core-stroke-roundedicon pack.