I have SVG Icon library which exports all the SVG images as modules like below

Icon Library

import React from 'react';
import Clock from './icons/clock.svg';
import Calender from './icons/calender.svg';

export const ClockIcon = Clock
export const CalenderIcon = Calender;

And I am using the library in application like below

Using Icon library in application

import React from 'react';
import { Button as MUIButton } from '@mui/material';
import './button.scss';
import { Icon } from '../Icons/Icon';
import { ClockIcon } from '../../../dist';

function Button(props: any) {
  const { label, ...rest } = props;
  return <>
    <Icon icon={ClockIcon} />
    <MUIButton {...rest}>{label}</MUIButton>
  </>;
}

export default Button;

When running webpack build inside the build both SVGs are present

Even though If I am using only Clock Icon Calender Icon also gets added to the bundle.

Is there any way to ensure only used assets are included in the bundle.

I don't want to directly import SVG Icons like below to achieve this

import ClockIcon from '../../../dist/icons/clock.svg';

In webpack there is a optimization parameter called usedExports which will ensure the unused exports are not getting included in the bundle. But the code only works for unused javascript code. Not for svg files.