Note: I already read other questions related but even trying some workaronds there, I didd’t found a solution.

I have a problem that I’ve been investigating for a couple of days and I can’t seem to resolve it.

In my application, I’m building a <WeatherIcon /> component, which essentially checks a numeric code matrix as keys for a Map and returns the address of the icon to be used.

The problem lies in that I have two types of icons, animated and static, each in its respective folder within /assets. The logic works perfectly in the dev environment, but when I run vite build, it only processes the assets from the /assets/animated folder.

I understand that Vite by default only processes the assets that are explicitly imported/exported and used in /src, and this is exactly what I’m doing. I’ve tried several approaches, such as separating the assets folder by prefixing the files with animated- or static-, importing and exporting the file addresses in helpers, having separate components for animated/static icons, but Vite still doesn’t process the assets the way I want.

I’ve attached the helper code, the folder structure for assets, and the component code. Maybe someone can see something that I’m not seeing.

The assets folder and the dist result

src/assets
├── animated
│   ├── clear-day.svg
│   ├── cloudy.svg
│   ├── dust.svg
│   ├── fog.svg
│   ├── haze-day.svg
│   ├── haze.svg
│   ├── rain-and-sleet-mix.svg
│   ├── rainy-1.svg
│   ├── rainy-2.svg
│   ├── rainy-3.svg
│   ├── severe-thunderstorm.svg
│   ├── snowy-1.svg
│   ├── snowy-2.svg
│   ├── snowy-3.svg
│   └── thunderstorms.svg
└── static
    ├── clear-day.svg
    ├── cloudy.svg
    ├── dust.svg
    ├── fog.svg
    ├── haze-day.svg
    ├── haze.svg
    ├── rain-and-sleet-mix.svg
    ├── rainy-1.svg
    ├── rainy-2.svg
    ├── rainy-3.svg
    ├── severe-thunderstorm.svg
    ├── snowy-1.svg
    ├── snowy-2.svg
    ├── snowy-3.svg
    └── thunderstorms.svg

Those .svg there are only the /animated/, /static are not being processed

dist
├── assets
│   ├── clear-day-xXPM11tY.svg
│   ├── cloudy-ArifDuTp.svg
│   ├── fog-4jp9XWOF.svg
│   ├── haze-9_8ELXPu.svg
│   ├── index-DPDs6ix0.js
│   ├── index-O_dZZa1F.css
│   ├── rain-and-sleet-mix-vDH9vBwd.svg
│   ├── rainy-1-VxaL7Ezf.svg
│   ├── rainy-2-MmKM9EXc.svg
│   ├── rainy-3-IR8EbsFc.svg
│   ├── severe-thunderstorm-4t-lcuIa.svg
│   ├── snowy-1-0VBrX7Fh.svg
│   ├── snowy-2-M57x8x7x.svg
│   ├── snowy-3-eusHMpeb.svg
│   └── thunderstorms-a_zBMSBU.svg
├── index.html
└── vite.svg

The helper

import animatedClear from '@/assets/animated/clear-day.svg';
import animatedCloudy from '@/assets/animated/cloudy.svg';
import animatedDrizzle from '@/assets/animated/rain-and-sleet-mix.svg';
import animatedHaze from '@/assets/animated/haze.svg';
import animatedFog from '@/assets/animated/fog.svg';
import animatedDust from '@/assets/animated/dust.svg';
import animatedRainy1 from '@/assets/animated/rainy-1.svg';
import animatedRainy2 from '@/assets/animated/rainy-2.svg';
import animatedRainy3 from '@/assets/animated/rainy-3.svg';
import animatedSnowy1 from '@/assets/animated/snowy-1.svg';
import animatedSnowy2 from '@/assets/animated/snowy-2.svg';
import animatedSnowy3 from '@/assets/animated/snowy-3.svg';
import animatedThunderstorm from '@/assets/animated/thunderstorms.svg';
import animatedsevereThunderstorm from '@/assets/animated/severe-thunderstorm.svg';

import staticClear from '@/assets/static/static-clear-day.svg';
import staticCloudy from '@/assets/static/cloudy.svg';
import staticDrizzle from '@/assets/static/rain-and-sleet-mix.svg';
import staticHaze from '@/assets/static/haze.svg';
import staticFog from '@/assets/static/fog.svg';
import staticDust from '@/assets/static/dust.svg';
import staticRainy1 from '@/assets/static/rainy-1.svg';
import staticRainy2 from '@/assets/static/rainy-2.svg';
import staticRainy3 from '@/assets/static/rainy-3.svg';
import staticSnowy1 from '@/assets/static/snowy-1.svg';
import staticSnowy2 from '@/assets/static/snowy-2.svg';
import staticSnowy3 from '@/assets/static/snowy-3.svg';
import staticThunderstorm from '@/assets/static/thunderstorms.svg';
import staticsevereThunderstorm from '@/assets/static/severe-thunderstorm.svg';

const lightRain = [500, 501];
const heavyRain = [502, 503, 504];
const moderateRain = [520, 521, 522, 531];
const ligthSnow = [600, 601];
const moderateSnow = [611, 612, 613, 615, 620, 621, 622];
const heavySnow = [602];
const thunderstorm = [200, 201, 202, 210, 221, 230, 231, 232];
const severeStorm = [212];
const drizzle = [300, 301, 302, 310, 311, 312, 313, 314, 321];
const clouds = [801, 802, 803, 804];
const clear = [800];
const atmosphere = [701, 711, 731, 751, 762, 771, 781];
const haze = [721];
const fog = [741];
const dust = [761];

export const codesMatrix = [
  lightRain,
  heavyRain,
  moderateRain,
  ligthSnow,
  moderateSnow,
  heavySnow,
  thunderstorm,
  severeStorm,
  drizzle,
  clouds,
  clear,
  atmosphere,
  haze,
  fog,
  dust,
];

export const AnimatedMap = new Map<number[], string>([
  [clear, animatedClear],
  [clouds, animatedCloudy],
  [drizzle, animatedDrizzle],
  [haze, animatedHaze],
  [fog, animatedFog],
  [dust, animatedDust],
  [lightRain, animatedRainy1],
  [moderateRain, animatedRainy2],
  [heavyRain, animatedRainy3],
  [ligthSnow, animatedSnowy1],
  [moderateSnow, animatedSnowy2],
  [heavySnow, animatedSnowy3],
  [thunderstorm, animatedThunderstorm],
  [severeStorm, animatedsevereThunderstorm],
  [atmosphere, animatedHaze],
]);

export const StaticMap = new Map<number[], string>([
  [clear, staticClear],
  [clouds, staticCloudy],
  [drizzle, staticDrizzle],
  [haze, staticHaze],
  [fog, staticFog],
  [dust, staticDust],
  [lightRain, staticRainy1],
  [moderateRain, staticRainy2],
  [heavyRain, staticRainy3],
  [ligthSnow, staticSnowy1],
  [moderateSnow, staticSnowy2],
  [heavySnow, staticSnowy3],
  [thunderstorm, staticThunderstorm],
  [severeStorm, staticsevereThunderstorm],
  [atmosphere, staticHaze],
]);

Te components

As you can see I have some repeated code, I wanted to make it this way, the more explicit possible just to check if this will force the assets processing, but no

const findRow = (matrix: number[][], code: number) => {
  return matrix.filter((row) => {
    const icon = row.find((i) => i === code);
    if (icon) return row;
  })[0];
};

export const WeatherIcon: FC<Props> = ({ code, tw, description }) => {
  const foundRow = findRow(codesMatrix, code);
  const icon = StaticMap.get(foundRow);
  if (!icon) return <PiWarningCircleLight />;

  return (
    <img
      key={`${icon}-${description}`}
      src={icon}
      alt={description}
      className={twClasses(tw)}
    />
  );
};

export const AnimatedWeatherIcon: FC<Props> = ({ code, tw, description }) => {
  const foundRow = findRow(codesMatrix, code);
  const icon = AnimatedMap.get(foundRow);
  if (!icon) return <PiWarningCircleLight />;

  return (
    <img
      key={`${icon}-${description}`}
      src={icon}
      alt={description}
      className={twClasses(tw)}
    />
  );
};