Problem with icons

[VictorPulzz]

Hello guys! I show my the most strange error: Firstly I got this error in console: Next. For example I add new icon in my folder, next I use it, annnnddddd, nothing showed, I restarted project, annnnddddd nothing showed, BUT when I duplicate browser tab, or open again, Icon was showed, What the problem?:D

Vite config:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from 'path';
import { checker } from 'vite-plugin-checker';
import vitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap';

export default defineConfig(({ mode }) => {
  return {
    resolve: {
      alias: {
        '~': path.resolve(__dirname, './src'),
        '@root': path.resolve(__dirname),
        '@ui': path.resolve(__dirname, './src/view/ui'),
      },
    },
    envDir: './env',
    build: {
      outDir: 'build',
    },
    plugins: [
      react(),
      checker({ typescript: true }),
      vitePluginSvgSpritemap('src/resources/assets/icons/*.svg', {
        route: 'icons/spritemap.svg',
        prefix: 'sprite-',
        svgo: {
          path: "src/resources/assets/icons/*.svg",
          plugins: [
            {
              name: 'convertColors',
              params: {
                currentColor: true,
                names2hex: true,
                rgb2hex: true,
                shorthex: true,
                shortname: true
              }
            },
            {
              name: 'addAttributesToSVGElement',
              params: {
                attributes: [{ fill: "currentColor" }],
              }
            },
          ]
        },
      }),

      vitePluginSvgSpritemap('src/resources/assets/icons/raw/*.svg', {
        route: 'icons/raw-spritemap.svg',
        prefix: 'sprite-',
        injectSVGOnDev: true,
        svgo: {
          path: "src/resources/assets/icons/raw/*.svg",
          plugins: [
            {
              name: 'convertColors',
              params: {
                currentColor: false
              }
            },
          ]
        },
      }),
    ],
  };
});

How I use:

<svg>
  <use xlinkHref="/icons/spritemap.svg#sprite-profile3" />
</svg>

Version libs: "react": "18.3.1", "@spiriit/vite-plugin-svg-spritemap": "^2.3.1", "vite": "5.3.6", "vite-plugin-checker": "0.8.0"

[dsvgl]

This is free software, please watch your language.

For your problem: I have not tested this but route: 'icons/spritemap.svg', seems wrong. This is a route path. Try without the .svg and/or without putting in into icons/ sub directory.