Adding Shiba Inu Loading and Error SVGs to My React Site

• Portfolio2.0

  1 21 4.8 JavaScript

• svgr

  15 9,309 8.3 TypeScript

  Transform SVGs into React components 🦁

  Ultimately, I choose to take advantage of create-react-app's option to import an SVG as a component. Translating SVGs to the DOM this way is expensive, but in this case, I have less than 10 SVGs on my site imported this way, and they're all in use. For a larger site, I would look into packages like SVGR, using the Webpack Asset Modules or an icon library like Font Awesome. My Error component now looks like this:

• Klotho

  klo.dev

  sponsored

  AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  

• Font-Awesome

  81 70,764 5.9 JavaScript

  The iconic SVG, font, and CSS toolkit

  

  Ultimately, I choose to take advantage of create-react-app's option to import an SVG as a component. Translating SVGs to the DOM this way is expensive, but in this case, I have less than 10 SVGs on my site imported this way, and they're all in use. For a larger site, I would look into packages like SVGR, using the Webpack Asset Modules or an icon library like Font Awesome. My Error component now looks like this:

Suggest a related project