Primero editemos el webpack.config.js para poder tener imágenes en nuestra Web.

module: {
		rules: [
			{
				test: /\\.(png|svg|jpg|gif)$/,
				type: 'asset',
			}
		]
	},
// ahora es super sencillo porque webpack 5 por defecto ya puede manejar 
// extensiones de imágenes

Al momento que queramos usar estas imágenes podemos realizarlo de la siguiente manera

// Header.jsx como ejemplo
import menu from '@icons/icon_menu.svg';
import logo from '@logos/logo_yard_sale.svg'
import shoppingCart from '@icons/icon_shopping_cart.svg';

<img src={menu} alt="menu" className="menu" />
<img src={logo} alt="logo" className="nav-logo" />
<img src={shoppingCart} alt="shopping cart" />

Usemos alias para facilitar la importación y rutas en nuestra aplicación

module.exports = {
	resolve: {		
		alias: {
			'@components': path.resolve(__dirname, 'src/components/'),
			'@containers': path.resolve(__dirname, 'src/containers/'),
			'@pages': path.resolve(__dirname, 'src/pages/'),
      '@styles': path.resolve(__dirname, 'src/styles/'),
			'@icons': path.resolve(__dirname, 'src/assets/icons/'),
			'@logos': path.resolve(__dirname, 'src/assets/logos/'),
			'@routes': path.resolve(__dirname, 'src/routes/'),
		}
	}
}