Icon is not displaying. href is #undefined

[muni2explore]

/* eslint-disable react/jsx-key */
import { Icon } from "@netdata/netdata-ui";

function App() {

  return (
    <>
      <div>
        <Icon name="gear" size="large" />
      </div>
    </>
  )
}

export default App

# node - v18.12.0
{
"dependencies": {
    "@netdata/netdata-ui": "^2.15.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "styled-components": "^5.3.10"
  },
 }

[muni2explore]

I think this screenshot will help you, to quickly debug the issue.

[muni2explore]

There is no id property in iconSymbol instance. It always throwing `

undefined`.

None of the icon are displaying.

I think it might issue with 'path' to the SVG files. All files location are starting like this /node_modules/@netdata/netdata-ui/lib/components/icon/assets/gear.svg

[muni2explore]

Becuase of this issue Icon used in all the components are not working. please check and let me know

[novykh]

You need to use svg-sprite-loader if you are using webpack for the svg of @netdata/netdata-ui, otherwise some other tool appropriate based on your build needs.

[muni2explore]

I am using Vite for build. Can you please suggest me appropriate plugins?

[muni2explore]

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import svgLoader from 'vite-svg-loader';
import * as path from 'path';

// https://vitejs.dev/config/
export default ({ mode }) => {
  // eslint-disable-next-line prettier/prettier
  process.env = {
    ...process.env,
    ...loadEnv(mode, path.resolve(__dirname, 'src', 'environments')),
  };

  return defineConfig({
    plugins: [
      react(),
      svgLoader({
        defaultImport: 'raw',
      }),
    ],
  });
};

I am using above vite configuration. But still none of SVG icons showing.

Please help me to solve this issue. @novykh