Assets & Icons
Images
Section titled “Images”Always try to optimize images beforehand. A very good FOSS tool for that is squoosh, which can handle most common formats and can resize and compress. .webp is the preferred format, as it is the most optimal in terms of browser support & file size.
SVGs should be optimized as well. You can use SVGOMG for that. Don’t forget to change the fill or stroke color (depending on the asset) to currentColor, as the color can then easily be inherited from its parent’s text color. This approach supports theming, simplifies maintenance, and improves reusability.
When using custom icons in the codebase, svgr is the recommended tool as it easily transforms SVGs into React components. It’s supported in both Next.js and Vite via plugin.
Icon libraries
Section titled “Icon libraries”There are many excellent free open-source icon libraries for React. For example, Lucide Icons has over 1,500 icons.
Naming: These libraries often name their components without explicitly indicating that they’re icons. We should always rename the imports to make it clear that they’re icons.
// This is quite a common naming convention for icon components, but it doesn't clearly indicate it's an iconimport { Sun1 } from "cool-icon-library";
// A better approach is to rename the icon immediatelyimport { Sun1 as SunIcon } from "cool-icon-library";