chore: SVG optimization no longer breaks outline icons

[liamdebeasi]

Issue

Certain outline icons are being rendered as filled.

Why it's happening

The SVG optimization script currently causes some outline SVGs to be filled. SVGs with fill="none" set on the svg element has this attribute replaced by an ionicon-fill-none class:

ionicons/scripts/build.ts

Line 58 in 116d250

item.class.add('ionicon-fill-none');

However, the optimized SVG template is then updated to a) remove all non-essential attributes from the svg element and b) add the ionicon class:

ionicons/scripts/build.ts

Lines 170 to 171 in 116d250

	/<svg (.*?)>/,
	`<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">`,

This causes the ionicon-fill-none class to be removed from the svg element. As a result, outline icons appear filled.

How I fixed it

This PR fixes the issue by removing the .replace call. During a previous optimization step I ensure that the ionicon class is added to the svg element. There are other attributes that need to be removed such as width and height. However, these are already being removed in

ionicons/scripts/build.ts

Line 79 in 116d250

removeDimensions: true,

.

How to test this PR

1. Clone the repo and check out icon-binocs. This is icon is being added in feat: add binoculars icons #1258 and reproduces this bug.
2. Run npm run build.
3. Open dist/svg/binoculars-outline.svg and verify that the icon appears filled.
4. Merge that branch with this fix. git fetch && git merge origin/icon-svg-optimization.
5. Run npm run build.
6. Open dist/svg/binoculars-outline.svg and verify that the icon appears outlined.

Before	After

[sean-perkins]

Verified against the reproduction steps, changes look good 👍