Add SVG asset to public directory for Vite app

[Pettor]

My Tubrorepo structure has a web-app that uses Vite to run and a shared UI from the package folder like this:

- apps/web
- package/shared-ui

The shared UI has a StyledComponent that imports an SVG and use it as a background (just an example, so not the full component):

import SomeSvg from "./svg/SomeSvg.svg";

export const SomeComponent = styled("div")(() => ({ backgroundImage: `url`${SomeSvg}` }));

The SVG file will end up in the dist of shared-ui but my Vite app will never include SomeSvg.svg in the public folder and therefore allow the component to fetch the SVGs as a background image. If I copy the svg files to the public folder in my web-app everything will work.

Is there a way to build packages and basically say "these are public assets and should be included in the build as such"?

Thanks 🙏

[anthonyshew]

We don't have a Turborepo-native solution for this today and I don't know of anything in the JS/TS ecosystem that solves for this out-of-the-box. You can certainly write a Node.js script to spread your static assets around into your application's public directories prior to builds.

That said, I'd be interested in seeing if we could figure out a Turbo native solution for this.

[AabhasDhaubanja]

I don't know if this is the right way to do it but what I did was create a separate assets package. I named the package @repo/assets. Then in the component use it like:

import SomeSvg from "@repo/assets/SomeSvg.svg";

export const SomeComponent = styled("div")(() => ({ backgroundImage: `url`${SomeSvg}` }));

[maciejbaczynski]

@AabhasDhaubanja

Can you show how your @repo/assets looks like?