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.
Unoptimized SVGs are copied to build/src overriding the optimized SVGs.
I've made the following changes to correct this:
Removed the SVG copy step from the Stencil config.
Updated the start script to optimize all SVG assets and copy them to the build directory. This ensures that optimized SVGs are being generated every time npm run start runs. Note that Stencil will not re-run this optimization step on each re-build. Devs need to continue to run npm run build.files after the initial build if they want to modify icons and see their changes.
Testing:
Run npm run start
On the testing page that loads, verify that svg elements inside of the Shadow DOM for ion-icon have the ionicon class.
Run npm run build.files. Repeat step 2.
Note that on main, the ionicon 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 default 32px and should always have been thinner than normal.
When testing Ionicons manually there was an issue with our configuration where the
index.htmlfile 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.htmlused in testing loads asset from thebuilddirectory. The build script does copy optimized SVG assets to thebuilddirectory. 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 thebuilddirectory.As a result, we have the following flow:
build/src.build/srcoverriding the optimized SVGs.I've made the following changes to correct this:
startscript to optimize all SVG assets and copy them to thebuilddirectory. This ensures that optimized SVGs are being generated every timenpm run startruns. Note that Stencil will not re-run this optimization step on each re-build. Devs need to continue to runnpm run build.filesafter the initial build if they want to modify icons and see their changes.Testing:
npm run startsvgelements inside of the Shadow DOM forion-iconhave theioniconclass.npm run build.files. Repeat step 2.Note that on
main, theioniconclass 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: 8pxas opposed to the default32pxand should always have been thinner than normal.