Build an icon component library for React with SVGR and Rollup

Learn how to build your own SVG icon component library for React! In this video, we use SVGR and Rollup to make a publishable NPM package, with components generated directly from your SVG files.
Code: github.com/mryechkin/acme-icons
Timestamps:
00:00 Intro
00:20 Project Setup
01:04 SVGR Overview
01:43 Adding SVGR
05:59 Rollup / Plugins Overview
07:46 Adding Rollup
08:12 Rollup Config
10:17 Babel Plugins
11:20 Babel Presets
12:15 Updating NPM Scripts
13:54 Adding Babel Config
16:14 Rollup Filesize Plugin
17:35 Using The Bundle In An App
GitHub: github.com/mryechkin
Twitter: / mryechkin

[@Uma-ol6rh]

I followed along and used my own SVG images, it works great locally. Thank you, awesome tutorial.

[@HeyNoah]

Exactly what I was looking for! Love your videos man! Thanks so much!

[@pedroserapio8075]

Very well explained. Thank you for pointing out the Babel setup, usually not simple to understand.

[@flightstreamer]

Awesome! Thanks for a great tutorial once again! 😀

[@phanirajk9144]

Great tutorial.
Looking forward for more.

[@alexanderbartolo444]

This is great, thank you for the detailed explanation.

[@carolineroy8009]

Super nice tutorial ! I hope you'll publish new videos in the future, love your content 🥺

[@EzequielGarraffo]

I have no words to thank you. This solved my problem with svgs and rollup.
Fantastic tutorial. Subscribed and liked.

[@mryechkin]

Glad to hear that! Thank you :)

[@rmjwilbur]

Thanks, looks just like what I was after

[@PabloRodriguez-hc4wd]

Awesome!!! Which rollup config dou you recomend to generate .js n.esm and ts?

[@mohamedyoussef8835]

Awesome Tutorial +++++++++++++++++ Thank You

[@vedbhanushali608]

thanks

[@ericsonl_]

Hey it's there a way to warp it as props from Icon component like using it with button for example `...` or ``

[@rudzkygen]

Is there an option to add dynamic import for there icons? Something similar to Lucide Icons

[@brindch8372]

Great work! how about creating a component library that is using material-ui?

[@withAsim]

Hi, I want to use (.jsx) files rather than (.js) how can I use it because I am facing an error in the build.

[@pixelbakery]

Hi, any advice on how to use SVGR with Vite/React/Tailwind?

[@mryechkin]

Great question! You can use their Rollup plugin in Vite. I made a sample repo for reference: github.com/mryechkin/vite-svgr