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.
When testing Ionicons manually there was an issue with our configuration where the
index.html
file served by the Stencil dev server never used the optimized SVG assets.We've had issues in the past where the optimization script incorrectly changes the behavior of an SVG, so being able to validate that this script is working as intended is important.
The
index.html
used in testing loads asset from thebuild
directory. The build script does copy optimized SVG assets to thebuild
directory. The problem is that this causes the Stencil Dev Server to re-build. As part of the Stencil config we instruct it to copy all unoptimized SVGs to thebuild
directory.As a result, we have the following flow:
build/src
.build/src
overriding the optimized SVGs.I've made the following changes to correct this:
start
script to optimize all SVG assets and copy them to thebuild
directory. This ensures that optimized SVGs are being generated every timenpm run start
runs. Note that Stencil will not re-run this optimization step on each re-build. Devs need to continue to runnpm run build.files
after the initial build if they want to modify icons and see their changes.Testing:
npm run start
svg
elements inside of the Shadow DOM forion-icon
have theionicon
class.npm run build.files
. Repeat step 2.Note that on
main
, theionicon
class will not be present on the SVG elements indicating that the unoptimized SVG is being loaded.The screenshot diffs here are correct and were capturing the original buggy behavior. The call (@) icon has
color="tertiary"
set and should always have been a cyan color. The heart outline color had--ionicon-stroke-width: 8px
as opposed to the default32px
and should always have been thinner than normal.