@rsbuild/plugin-svgr: few svg images are in static build directory

[ezze]

I am finishing migration from react-scripts and craco to Rsbuild, and noticed strange details in output bundle. I use a lot of SVG images which are imported as react components but few of them are also located in build/static/svg directory. As an example, my svg imports look like this:

import { FirstDataIconName, IconComponent } from 'components/icon/types';

import { ReactComponent as airport } from './fd_airport.svg';
import { ReactComponent as barbeque } from './fd_bbq.svg';
import { ReactComponent as children } from './fd_children.svg';
import { ReactComponent as eco } from './fd_eco.svg';
import { ReactComponent as parking } from './fd_parking.svg';
import { ReactComponent as pet } from './fd_pet.svg';
import { ReactComponent as premium } from './fd_premium.svg';
import { ReactComponent as sber } from './fd_sber.svg';
import { ReactComponent as school } from './fd_school.svg';
import { ReactComponent as shopping } from './fd_shopping.svg';
import { ReactComponent as smartHome } from './fd_smarthome.svg';
import { ReactComponent as soundProofing } from './fd_soundproofing.svg';
import { ReactComponent as sport } from './fd_sport.svg';
import { ReactComponent as styling } from './fd_styling.svg';
import { ReactComponent as ventilation } from './fd_ventilation.svg';

export const firstDataIcons: Record<FirstDataIconName, IconComponent> = {
  airport,
  barbeque,
  children,
  eco,
  parking,
  pet,
  premium,
  sber,
  school,
  shopping,
  smartHome,
  soundProofing,
  sport,
  styling,
  ventilation
};

But one of these images (fd_pet.svg) is in result build directory as svg-file:

The rest two pictures on the screenshot are imported in other files the same way.

If I comment fd_pet.svg and don't use it anymore then it's removed from build/static/svg static directory. When I open a page I don't see requests to svg files located in static/svg directory so, I guess, all of them are located in resulting JS-chunks as react components and look like this:

All svg icons are present in UI, so everything works as expected.

But I wonder why few svg files are located in output directory. There is nothing special there.

Just to compare:

fd_pet.svg

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 5C15.1326 5 15.2597 5.05272 15.3535 5.14648C15.4472 5.24025 15.5 5.36739 15.5 5.5C15.5 5.63261 15.4472 5.75975 15.3535 5.85352C15.2597 5.94728 15.1326 6 15 6C14.8673 6 14.7402 5.94728 14.6464 5.85352C14.5527 5.75975 14.5 5.63261 14.5 5.5C14.5 5.36739 14.5527 5.24025 14.6464 5.14648C14.7402 5.05272 14.8673 5 15 5ZM8.99996 5C9.13256 5 9.2597 5.05272 9.35347 5.14648C9.44724 5.24025 9.49996 5.36739 9.49996 5.5C9.49996 5.63261 9.44724 5.75975 9.35347 5.85352C9.2597 5.94728 9.13256 6 8.99996 6C8.86735 6 8.74021 5.94728 8.64644 5.85352C8.55267 5.75975 8.49996 5.63261 8.49996 5.5C8.49996 5.36739 8.55267 5.24025 8.64644 5.14648C8.74021 5.05272 8.86735 5 8.99996 5ZM19.5 9C19.6326 9 19.7597 9.05272 19.8535 9.14648C19.9472 9.24025 20 9.36739 20 9.5C20 9.63261 19.9472 9.75975 19.8535 9.85352C19.7597 9.94728 19.6326 10 19.5 10C19.3673 10 19.2402 9.94728 19.1464 9.85352C19.0527 9.75975 19 9.63261 19 9.5C19 9.36739 19.0527 9.24025 19.1464 9.14648C19.2402 9.05272 19.3673 9 19.5 9ZM4.49996 9C4.63256 9 4.7597 9.05272 4.85347 9.14648C4.94724 9.24025 4.99996 9.36739 4.99996 9.5C4.99996 9.63261 4.94724 9.75975 4.85347 9.85352C4.7597 9.94728 4.63256 10 4.49996 10C4.36735 10 4.24021 9.94728 4.14644 9.85352C4.05267 9.75975 3.99996 9.63261 3.99996 9.5C3.99996 9.36739 4.05267 9.24025 4.14644 9.14648C4.24021 9.05272 4.36735 9 4.49996 9ZM12 12.5C12.1536 12.4947 12.3073 12.5014 12.4599 12.52C12.8138 12.6838 13.1201 12.935 13.3499 13.25C13.8999 13.9 14.39 14.4801 14.92 15.1001L15.8199 16.1599C15.854 16.199 15.8909 16.2359 15.93 16.27L16.17 16.51C17.29 17.62 18.0299 18.43 17.9799 19.24C17.9312 19.4128 17.8424 19.5716 17.7208 19.7036C17.5992 19.8357 17.4482 19.9373 17.28 20C17.02 19.99 16.4999 19.9201 15.9899 19.8601C14.6953 19.6656 13.389 19.5586 12.0799 19.54H11.9C10.5974 19.5561 9.29761 19.6631 8.00997 19.8601C7.49997 19.9201 6.97991 19.99 6.69991 20C6.53069 19.939 6.37878 19.8381 6.25691 19.7058C6.13505 19.5735 6.04689 19.4136 5.99996 19.24C5.95996 18.44 6.6999 17.64 7.8199 16.52L8.06001 16.28C8.09841 16.2483 8.13205 16.2112 8.15999 16.1699C8.72999 15.5199 9.22996 14.9301 9.74996 14.3201L9.78999 14.27L10.64 13.27C10.8718 12.9544 11.1774 12.7004 11.53 12.53C11.5512 12.528 11.5717 12.5211 11.5899 12.51C11.6599 12.5 11.86 12.5 12 12.5ZM15 3C14.5055 3 14.0222 3.14668 13.611 3.42139C13.1999 3.69609 12.8795 4.0864 12.6903 4.54321C12.501 5.00003 12.4516 5.50284 12.5481 5.98779C12.6445 6.47275 12.8825 6.91819 13.2321 7.26782C13.5818 7.61745 14.0273 7.85544 14.5123 7.9519C14.9972 8.04837 15.4998 7.99903 15.9566 7.80981C16.4134 7.6206 16.8039 7.30004 17.0786 6.88892C17.3533 6.47779 17.5 5.99445 17.5 5.5C17.5 4.83696 17.2366 4.20102 16.7678 3.73218C16.2989 3.26334 15.663 3 15 3ZM8.99996 3C8.5055 3 8.02216 3.14668 7.61104 3.42139C7.19992 3.69609 6.87948 4.0864 6.69026 4.54321C6.50104 5.00003 6.45159 5.50284 6.54805 5.98779C6.64451 6.47275 6.8825 6.91819 7.23213 7.26782C7.58176 7.61745 8.02733 7.85544 8.51228 7.9519C8.99724 8.04837 9.49981 7.99903 9.95662 7.80981C10.4134 7.6206 10.8039 7.30004 11.0786 6.88892C11.3533 6.47779 11.5 5.99445 11.5 5.5C11.5 4.83696 11.2366 4.20102 10.7678 3.73218C10.2989 3.26334 9.663 3 8.99996 3ZM19.5 7C19.0055 7 18.5222 7.14668 18.111 7.42139C17.6999 7.69609 17.3795 8.0864 17.1903 8.54321C17.001 9.00003 16.9516 9.50284 17.0481 9.98779C17.1445 10.4727 17.3825 10.9182 17.7321 11.2678C18.0818 11.6175 18.5273 11.8554 19.0123 11.9519C19.4972 12.0484 19.9998 11.999 20.4566 11.8098C20.9134 11.6206 21.3039 11.3 21.5786 10.8889C21.8533 10.4778 22 9.99445 22 9.5C22 8.83696 21.7366 8.20102 21.2678 7.73218C20.7989 7.26334 20.163 7 19.5 7ZM4.49996 7C4.0055 7 3.52216 7.14668 3.11104 7.42139C2.69992 7.69609 2.37948 8.0864 2.19026 8.54321C2.00104 9.00003 1.95159 9.50284 2.04805 9.98779C2.14451 10.4727 2.3825 10.9182 2.73213 11.2678C3.08176 11.6175 3.52733 11.8554 4.01228 11.9519C4.49724 12.0484 4.99981 11.999 5.45662 11.8098C5.91344 11.6206 6.30387 11.3 6.57857 10.8889C6.85327 10.4778 6.99996 9.99445 6.99996 9.5C6.99996 8.83696 6.73662 8.20102 6.26778 7.73218C5.79894 7.26334 5.163 7 4.49996 7ZM12 10.5C11.7356 10.4918 11.4711 10.5085 11.2099 10.55C11.0976 10.5707 10.9872 10.6006 10.88 10.6399C10.1926 10.9216 9.58972 11.3764 9.12996 11.96C8.81996 12.32 8.51994 12.67 8.22994 13.01C7.71994 13.62 7.20998 14.2101 6.64998 14.8701C6.56998 14.9501 6.48999 15.0201 6.40999 15.1001C5.14999 16.3501 3.74999 17.7499 4.02999 19.6599C4.16599 20.2242 4.45571 20.7399 4.86702 21.1494C5.27833 21.559 5.79508 21.8464 6.35994 21.98C6.46273 21.9933 6.56634 22 6.67 22C7.20593 21.977 7.74011 21.9237 8.26998 21.8401C9.47174 21.6576 10.6846 21.5574 11.9 21.54H12.0799C13.3053 21.5575 14.5281 21.6578 15.7399 21.8401C16.2665 21.9236 16.7973 21.9769 17.3299 22C17.4269 21.9994 17.5238 21.9927 17.62 21.98C18.1841 21.8448 18.7 21.5568 19.111 21.1475C19.5221 20.7382 19.8123 20.2234 19.9499 19.6599C20.2399 17.7399 18.8299 16.3401 17.5799 15.0901C17.4999 15.0101 17.4199 14.9401 17.3399 14.8601C17.0299 14.4901 16.7299 14.14 16.4399 13.8C15.9299 13.19 15.4199 12.6 14.8599 11.95C14.4023 11.3643 13.7988 10.909 13.1099 10.6299C13.0027 10.5906 12.8923 10.5607 12.78 10.54C12.5214 10.5065 12.2606 10.4931 12 10.5Z" fill="#08979C"/>
</svg>

fd_styling.svg

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 16C6.80222 16 6.60888 16.0586 6.44443 16.1685C6.27998 16.2784 6.15181 16.4346 6.07612 16.6173C6.00043 16.8 5.98063 17.0011 6.01921 17.1951C6.0578 17.3891 6.15304 17.5673 6.29289 17.7071C6.43275 17.847 6.61093 17.9422 6.80491 17.9808C6.99889 18.0194 7.19996 17.9996 7.38268 17.9239C7.56541 17.8482 7.72159 17.72 7.83147 17.5556C7.94135 17.3911 8 17.1978 8 17C8 16.7348 7.89464 16.4804 7.70711 16.2929C7.51957 16.1054 7.26522 16 7 16ZM19.06 12L20.29 10.77C20.8518 10.2075 21.1674 9.445 21.1674 8.65C21.1674 7.855 20.8518 7.0925 20.29 6.53L17.46 3.71C16.8975 3.1482 16.135 2.83264 15.34 2.83264C14.545 2.83264 13.7825 3.1482 13.22 3.71L12 4.94C11.9843 4.15479 11.6613 3.40706 11.1004 2.85736C10.5395 2.30766 9.78536 1.99984 9 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V15C22.0002 14.2146 21.6923 13.4605 21.1426 12.8996C20.5929 12.3387 19.8452 12.0157 19.06 12ZM10 19C10 19.2652 9.89464 19.5196 9.70711 19.7071C9.51957 19.8946 9.26522 20 9 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H9C9.26522 4 9.51957 4.10536 9.70711 4.29289C9.89464 4.48043 10 4.73478 10 5V19ZM12 7.76L14.64 5.12C14.8274 4.93375 15.0808 4.82921 15.345 4.82921C15.6092 4.82921 15.8626 4.93375 16.05 5.12L18.88 8C19.0662 8.18736 19.1708 8.44081 19.1708 8.705C19.1708 8.96919 19.0662 9.22264 18.88 9.41L16 12.29L12 16.24V7.76ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H11.82C11.9226 19.7036 11.9799 19.3935 11.99 19.08L17.07 14H19C19.2652 14 19.5196 14.1054 19.7071 14.2929C19.8946 14.4804 20 14.7348 20 15V19Z" fill="#08979C"/>
</svg>

This is my rsbuild.config.ts:

import { defineConfig, loadEnv } from '@rsbuild/core';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginLess } from '@rsbuild/plugin-less';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSvgr } from '@rsbuild/plugin-svgr';
import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

const { rawPublicVars } = loadEnv({ prefixes: ['REACT_APP_'] });

const modifyLessVars: Record<string, string> = {
  '@primary-color': 'rgb(16, 127, 140)',
  '@font-family':
    "Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, " +
    "'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'"
};

export default defineConfig({
  html: {
    template: './public/index.html'
  },
  output: {
    distPath: {
      root: './build'
    }
  },
  source: {
    define: {
      'process.env': JSON.stringify(rawPublicVars)
    }
  },
  server: {
    proxy: {
      '/api': {
        target: process.env.REACT_APP_PROXY_API_BASE_URL,
        changeOrigin: true,
        secure: false
      },
      '/api-ext': {
        target: process.env.REACT_APP_PROXY_API_BASE_URL,
        changeOrigin: true,
        secure: false
      }
    }
  },
  tools: {
    rspack: {
      plugins: [
        process.env.RSDOCTOR === 'true' &&
          new RsdoctorRspackPlugin({
            supports: {
              generateTileGraph: true
            }
          })
      ]
    }
  },
  plugins: [
    pluginBabel({
      babelLoaderOptions: {
        plugins: [['@babel/plugin-proposal-decorators', { version: '2023-05' }]]
      }
    }),
    pluginTypeCheck(),
    pluginReact(),
    pluginSvgr({ mixedImport: true }),
    pluginLess({
      lessLoaderOptions: {
        lessOptions: {
          modifyVars: modifyLessVars
        }
      }
    })
  ]
});