Repository navigation
Keep root <svg> attributes such as fill and stroke on rendered icons - #20
Merged
Merged
Conversation
Attributes such as fill, stroke and stroke-width on the root <svg> are lost when svg-jar builds a symbol or inline markup. These tests describe the fix: a configurable rootAttributes list, read from the root <svg> by findRootAttrs and passed by codegen to createSvg and createSvgInline, so each runtime sets them on the rendered <svg>. The e2e tests add a Heroicons outline icon to each Vite test project and check that the attributes take effect and that a caller attribute or CSS rule overrides them. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Attributes such as fill, stroke and stroke-width on the root <svg> of a source file were dropped, so icons that rely on children inheriting them, like Heroicons outline icons, rendered as solid shapes. The load hook now reads the attributes named in the new rootAttributes option from the root <svg>, and codegen passes them to createSvg and createSvgInline. Each runtime sets them on the <svg> it renders, before any attributes from the caller, so caller attributes and CSS rules still override them. The Ember runtime uses a modifier because the Ember build precompiles template() calls and needs a fixed template string. The integration tests now compare parsed attribute objects, because SVGO sorts attributes. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The project only had a linux baseline, so the first local e2e run on macOS failed while Playwright created it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Merged
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.
Fixes #19.
Attributes on the root
<svg>of a source file, such asfill,strokeandstroke-width, were dropped. Icons whose children rely on inheriting them rendered wrongly. Heroicons outline icons, for example, rendered as solid shapes.What changed
rootAttributesoption lists the root attributes to keep. The default is the inheritable presentation attributes:fill,fill-opacity,fill-rule,stroke,stroke-width,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-dasharray,stroke-dashoffset,stroke-opacity,clip-rule,opacityandcolor. A list you give replaces the default, and an empty list turns the feature off.<svg>it renders. This applies in sprite, inline and dev modes, for all 7 targets.<svg>, override the copied values.currentColoron, the rootfillandstrokeare replaced the same way as on the children.template()calls and needs a fixed template string.Why this is breaking
Any icon with presentation attributes on its root
<svg>now renders the way the source file does, and that can differ from how it rendered before. For example, an SVG withstroke="black"on its root now shows that stroke on its shapes. To keep the old rendering, setrootAttributes: [].Tests
findRootAttrs, the option and codegen.<svg>, that inline children inherit them, and that caller attributes or CSS override them.update-baselinesworkflow run on this branch.🤖 Generated with Claude Code