Tengo una biblioteca de iconos SVG que exporta todas las imágenes SVG como módulos como se muestra a continuación

Biblioteca de iconos

 import React from 'react'; import Clock from './icons/clock.svg'; import Calender from './icons/calender.svg'; export const ClockIcon = Clock export const CalenderIcon = Calender;

Y estoy usando la biblioteca en una aplicación como la siguiente

Uso de la biblioteca de iconos en la aplicación

 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;

Cuando se ejecuta la compilación del paquete web dentro de la compilación, ambos SVG están presentes

Aunque si estoy usando solo el ícono del reloj, el ícono del calendario también se agrega al paquete.

¿Hay alguna forma de asegurarse de que solo se incluyan activos usados en el paquete?

No quiero importar directamente iconos SVG como los siguientes para lograr esto

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

En webpack hay un parámetro de optimización llamado usedExports que garantizará que las exportaciones no utilizadas no se incluyan en el paquete. Pero el código solo funciona para el código javascript no utilizado. No para archivos svg.