The "best" way to manage icons in React.js

benadam.me · 1,486 words · saved by 1 readers

If you have been building user interfaces for any amount of time, you know that icons are, well, they are everywhere. I have spent the last 7 years building UIs with React.js and I have tried a number of different techniques for managing icons. Each technique has different tradeoffs. The main techniques I have used are: TLDR - Inline SVGs using sprites gives you the best performance to experience tradeoff. The big tradeoffs we are evaluating are performance vs. user experience. Before you hit me with a “well ackchyually, performance is a part of user experience”, I know ( I agree), let’s keep moving. When using the first approach I mentioned, an image tag referencing an image asset (png, svg, etc.), the first time the page is downloaded there is a flicker before the icons render. This happens because of a request waterfall. First the Browser downloads the HTML document. It then makes the subsequent requests to fetch all the assets for the page (images, scripts, stylesheets, etc). The b

The "best" way to manage icons in React.js Icon Rendering Techniques If you have been building user interfaces for any amount of time, you know that icons are, well, they are everywhere. I have spent the last 7 years building UIs with React.js and I have tried a number of different techniques for managing icons. Each technique has different tradeoffs. The main techniques I have used are: Image + SVG < img src = 'icon.svg' > Inline SVG const icon = ( < svg viewBox = "0 0 24 24" width = { 16 } height = { 16 }> < path d = "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2

The "best" way to manage icons in React.js

related reading