search

nasa-jpl / react-stellar

A React implementation of the Stellar design system for spacecraft operations tools
https://nasa-jpl.github.io/react-stellar/
Apache License 2.0
10 stars 2 forks source link

Ensure stories use Icon components instead of SVG components #38

Open AaronPlave opened 1 year ago

AaronPlave commented 1 year ago

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 commented 11 months ago

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 commented 11 months ago

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

anilnatha commented 11 months ago

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!