Change Dynamic loaded Svg path in Rollup

Question

I am using rollup for configuring my React build. In one of the components, I am lazyloading svg file and integrating it to the component JSX using the svgr plugin. I am facing an issue as my svg file is currently inside the same component where it is getting consumed. After build, its SVG path is changing but not changing at the place where it is imported into the component. My component file:

ImportedIconRef.current = await import(`./svg/${icon}.svg`).then((h) => {
      return h.default;
    });

Code folder:

Src
  |- components
        |- Icon
             |- svg
             |- index.tsx

Build Folder:

Build
   |- Assets
         |-svg
   |- index.js

After Build I am getting an error for unable to find svg on path './svg'

My rollup config:

    export default {
  input: process.env.STORYBOOKMODE === 'public' ? 'src/publicIndex.ts' : 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true,
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      },
      exports: 'named'
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true,
      globals: {
        react: 'React',
        'react-dom': 'ReactDOM'
      },
      exports: 'named'
    }
  ],
  external: ['react', 'react-dom', 'react-is'],
  plugins: [
    resolve(),
    image({
      include: /\.(gif)$/
    }),
    typescript({
      useTsconfigDeclarationDir: true
    }),
    postcss({
      extract: 'main.css',
      minimize: 'main.css'
    }),
    svgr({
      svgoConfig: {
        plugins: [{ removeTitle: false }, { removeViewBox: false }]
      }
    }),
    copy({
      targets: [
        {
          src: 'src/components/Icon/svg',
          dest: 'build/assets'
        }
      ]
    })
  ]
}

Change Dynamic loaded Svg path in Rollup

0 Answers0