Ensure stories use Icon components instead of SVG components

[AaronPlave]

For some reason the <Icon*> components are shown as <Svg*> in the Story code. These Svg components do not export/import correctly (which we could look at) so users who paste in the Navbar example (for example) run into errors.

[anilnatha]

I ran into this issue when trying to use SVGChevronLeft inside a Button as described here so it's not just related to the Navbar.

Source:

import SvgChevronLeft from "@nasa-jpl/react-stellar/dist/cjs/components/Icons/ChevronLeft";

...

<Button><SvgChevronLeft /><span>Back to application selection</span></Button>

Error:

11:29:51 AM [vite] Internal server error: Failed to resolve import "@nasa-jpl/react-stellar/dist/cjs/components/Icons/ChevronLeft" from "src/routes/jobs/new/chirp-rebinning/index.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/anatha/Projects/Unity/Repos/unity-ui/src/routes/jobs/new/chirp-rebinning/index.tsx:11:27
  18 |  //import ChevronLeft from "@nasa-jpl/stellar/icons/chevron_left.svg";
  19 |  //import { IconChevronLeft } from "@nasa-jpl/react-stellar";
  20 |  import SvgChevronLeft from "@nasa-jpl/react-stellar/dist/cjs/components/Icons/ChevronLeft";

A workaround for the time being, which requires some additional CSS, is to import the svg from stellar and use it as the value for the src attribute on an img.

[AaronPlave]

You should also be able to import the icon as IconChevronLeft from "@nasa-jpl/react-stellar".

[anilnatha]

I had tried that as well without success, but tried again and got it to work, I must have accidentally passed IconChevronLeft as a value to the src attribute on img rather than just using it as <IconChevronLeft />.

Thanks!