Fix: Icons not being included in production build

[hudson-newey]

Fix: Icons not being included in the production build

Previously, shoelace icons were not bundled during a production build, meaning that the media controls and other similar locations would have an empty placeholder where the icon should be.

This PR adds the shoelace icons to the production build by assigning each icon's SVG to a variable in the bundle's barrel file.

I have chosen this solution because

• We have to support offline usage (meaning that we can't use a CDN), and all assets must be included in the build
• I inlined the SVGs into the barrel file because shipping an additional dependency (in the form of a seperate SVG file in the assets/ directory) increases the complexity of deploying the web components because it requires you to: correctly set up CORS for this external file, serve the external file with the correct MIME type, permissions, etc... By inlining it into the single barrel file, there is no additional overhead to using the web components

Changes

Features

N.A.

Bug Fixes

• Fixes shoelace icons not being included in the production build

Code Quality

• Updated 11ty version

Remaining Bugs / Unresolved Problems

Visual Changes

Icons remain unchanged, but I have included a screenshot in case you can spot any discrepancies

Documentation Examples

https://66cd6037baf6ea88c3fb7d86--oe-web-components.netlify.app/examples/verification/single/

Related Issues

Fixes: #98

Additional Notes

CI Netlify deployment is currently broken because LucideJS shipped a breaking change in a minor version which caused 11ty documentation generation to tempoarily break.

Final Checklist

• [x] All commits messages are semver compliant
• [ ] Added relevant unit tests for new functionality
• [ ] Updated existing unit tests to reflect changes
• [x] Code style is consistent with the project guidelines
• [x] Documentation is updated to reflect the changes (if applicable)
• [x] Link issues related to the PR
• [x] Assign labels if you have permission
• [x] Assign reviewers if you have permission
• [x] Ensure that CI is passing
• [x] Ensure that pnpm lint runs without any errors
• [x] Ensure that pnpm test runs without any errors

[github-actions[bot]]

🚀 Deployed on https://66cd7f24bb1032a3cdd054ce--oe-web-components.netlify.app

[hudson-newey]

Here a mock-up of an example using registerBundledIcons

Pros:

• The DOM's document no longer has a src="<svg>xyz</svg>" on each sl-icon

Cons:

• Icon imports are no longer co-located with the usage. We have to remember to update our bundled icon library every time we want to use a new icon

Relevant commit: 12f36fd (#156)