auro-icon proxy makes it unusable in some situations

[ashleybiermannalaska]

Please verify the version of auro-icon you have installed

none now

Please describe the bug

Seats teams has been using the auro-icon without realizing it was a proxy, which can lead to CORs issues. for pages not hosted by our seatmap, the icons were not able to be retrieved, and could not be used.

Our project uses React, webpack, Typescript, and Jest.

Worked alongside Dale to come to a solution. The solution is to directly use the SVGs for the icons instead of the auro-icon. this is cumbersome and has a setup to complete. below is a list of setup we needed to add, and then another list of possible ways to make this a better dev experience.

Changes required in order to use auro icon svgs outside of our own hosted page:

• remove auro-icon element, replace with @alaskaairux/icons
• import each svg individually to every file it was to be used
  • cumbersome, combination of using auro docs with downloaded node modules to get correct svg path
• add a type declaration for each svg
• add npm package @svgr/webpack to support svgs as ReactComponents
• update all webpack configs to support svgs as ReactComponents
• add css styling to svgs, as they no longer could be styled with the auro-icon attributes
• mock all svg files for Jest unit tests and also add file mocks

Suggestions to improve dev experience:

Change the proxy situation, and allow for continued easy use of auro-icon without the CDN call. Maybe it relies on @alaskaairux/icons being installed and pulls from there. This way, devs continue to have access to all svgs without having to slog through the setup work to add a single icon. It also lets devs continue to use a BFF layer to determine the icon, without additional client side setup.

If not changing the proxy situation:

• update docs to warn dev about the pitfalls of auro-icon
  • as it is now, there seems to be no clear reason not to use it. but the CORs issue is a huge con in some cases
• update @alaskaairux/icons docs to better indicate what needs to happen with React projects (right now it's not as clear which of the special cases apply to which situations)
• add type declarations to each svg export
• create ReactComponent exports, to go from import { ReactComponent as Boarding } from ... to import { Boarding } from ...
• export all svgs from an index, to go from
  import { ReactComponent as PremiumClassLegroom } from "@alaskaairux/icons/dist/icons/in-flight/premium-class-legroom.svg"; import { ReactComponent as Boarding } from "@alaskaairux/icons/dist/icons/in-flight/boarding.svg";
  to
  import { Boarding, PremiumClassLegroom } from alaskaair/icons/dist/icons;

Reproducing the error on the docsite

None

Expected behavior

auro-icon can be used without cors issues
or
svgs have an easier way to be used in a project

What browsers are you seeing the problem on?

No response

Additional context

This is the PR created when SeatsUI moved from using auro-icon to using svgs
https://github.com/Alaska-ECommerce/SeatsUI/pull/593

Exit criteria

• either auro-icon does not rely on CDN calls which create CORs issues
• or
• SVGs are more easily consumable by React projects

[blackfalcon]

This issue has a couple of moving parts with it that include possible updates to the CDN solution for auro-icon as well as supporting updates to Auro Icons for a better developer experience in React.

See new issue for automating the generation of React icon components

• icons: enhanced React SVG component support  Icons#264

[jason-capsule42]

@ashleybiermannalaska

Have you tried using the customSVG support? This feature allows you to directly insert any SVG without relying on auro-icons CDN call. You will still get all the same API features and styling that auro-icon supports when you use this method.

<auro-icon customSvg>
  <svg slot="svg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" part="svg" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
</auro-icon>

[ashleybiermannalaska]

gave it a shot, but just get the penguin

[jason-capsule42]

Followup post pair programming with @ashleybiermannalaska

This feature is correctly supported in our current released version of auro-icon and no new work needs to be done here. However, the Seats team does have the issue that an earlier version of auro-icon was been forced on them due to being imported and defined in the document before they loaded their version of auro-icon with the correct feature support.

I have worked with Ashley to review how to resolve that problem by doing custom registration creating seats-auro-icon (or whatever name they want) and demonstrating how the customSvg attribute feature works correctly and solves their need.

I am marking this ticket as blocked temporarily while Ashley does a little bit of last validation on her end on this. Once I hear back from her I will close this issue, or move it back to work in progress if needed.

[jason-capsule42]

Still pending update from @ashleybiermannalaska re: mobile view functionality.

[jason-capsule42]

This change is understood to work as intended. Closing the ticket.