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.

[zigang93]

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.

Does this have any roadmap or idea yet?

[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?

[JoyShaheb]

i solved the issue like this for my use case

import { ICustomerDetails } from "../_Types";
import someImageHere from "../images/Company/ABCD/an-image.jpg";

export const CUSTOMER_DETAILS: ICustomerDetails[] = [
  {
    name: "ABCD",
    backgroundImage: someImageHere,
  },
  {
    name: "DEMO",
  },
  {
    name: "BDAJDGAwey",
  },
];

There might be other better solutions out there which i might not know, please feel free to reply to this and educate me 🙏