I’m working on integrating a library into an existing Vite + Vue main project. The library uses the same structure. The issue is with the icon missing after it is integrated into the main project.

Library Component:

Icon.vue

<script lang="ts" setup>
import { defineAsyncComponent } from "vue";

const props = withDefaults(
  defineProps<{
    icon: string;
  }>(),
  {...}
);

const icon = defineAsyncComponent(() => import(`../../../assets/icon/${props.icon}.svg`));
</script>

<template>
  <component
    :is="icon"
    class="icon"
    :width="width"
    :height="height"
    v-bind="$attrs"
    :filled="noFill && 'none'"
  >
  </component>
</template>

Vite Config

build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: "libTest",
      fileName: "library-component",
    },
    rollupOptions: {
      external: ["vue", "@apollo/client", "@vue/apollo-composable"],
      output: {
        globals: {
          vue: "Vue",
        },
      },
    },
  },

When I tried this locally, it seemed to be working fine. After integrating it into the library, I noticed that it’s being rebuilt inside the dist folder, and I think that’s the reason why it’s now empty.

Main project

dist
 +-assets
   +- icon-[hash].svg
   +- icon-two-[hash].svg
   ...

Vite.config

 build: {
    cssCodeSplit: false,
    minify: true,
    emptyOutDir: false,
    rollupOptions: {
      output: {
        entryFileNames: "scripts/app.js",
        assetFileNames: processAssetFileNames,
      },
    },
  },


ProcessAssetFileNames:

const brand = process.env.VITE_APP_BRAND;
export const brandsDir = "brands";
export const entryFileNames = `${brandsDir}/js/app-${brand}.js`;
const sizeUnitMode = process.env.VITE_APP_SIZE_UNIT_MODE
  ? process.env.VITE_APP_SIZE_UNIT_MODE
  : "inherit";

const assets = [
  {
    output: `${brandsDir}/${brand}/img/[name][extname]`,
    regex: /.(png|jpe?g|gif|svg|webp|avif)$/,
  },
  {
    regex: /.css$/,
    output: `${brandsDir}/${brand}/css/style-${sizeUnitMode}[extname]`,
  },
  {
    output: `scripts/${brand}/js/app-${brand}[extname]`,
    regex: /.js$/,
  },
];

export function processAssetFileNames(info) {
  if (info?.name) {
    const name = info.name;

    const result = assets.find((a) => a.regex.test(name));
    if (result) {
      return result.output;
    }
  }
  return `${brandsDir}/${brand}/${brand}[extname]`;
}

How can I prevent the main project from touching the filenames of the components/assets inside the library so that the importing remains correct? I expect it to be the same without the hash.