Build an icon component library for React with SVGR and Rollup

hey everyone today we'll be building our own svg based icon component library for react uh we'll be using a tool called svgr to generate our react components and then we will package it all up together into a publishable npm module using rollup all right so i've got the base of my project already set up right now just a bare bones package json there are no dependencies installed and then i have a folder called assets and this is where all the svgs will be so as you can see we have a couple of svgs here they are not all consistently the same size the formatting is a little bit different too chances are they were exported by different tools so this is a likely scenario that you may have and this is where svgr will come into play where it will actually help us clean up some of this now the idea is that we want to take these svgs and turn them into reusable react components and for that we'll be using the svgr tool so the way svgr works is it takes your raw svg input something like this and it will turn it into a react component as you'll see it removes a lot of the redundant information it cleans up the formatting of your svgs and depending on the options that you pass to it it will set specific attributes uh and pass props to it and so on now there are a couple of different ways of using svgr uh we will use the command line interface because we want to run it as an npm script and then package uh package up the output uh using rollup so the first thing we want to do is we want to install the cli and then we'll also need to install rimroaf so that we can run the command to clean up our files all right so we got the first two dependencies installed and notice that we're installing them as dev dependencies because this will only be used at the build time so we don't want to actually ship any of this with uh with our bundle alright the next step is we need to create a script to run our svg command so i will call this svgr and then to run it with say svgr and then we need to specify the output folder and we will put this in the folder called src because it's generating the react code for us we'll put it in the same folder as where we would have put our own code and then we'll need to pass it the location of where our source svgs are so that will be assets all right now before we run the command there's a couple of options that you can set and we will be using some of them so because we want these to be icon components the first option we'll be using is icon and what this does is it sets the dimensions of the svgs to a value of one em and this will enable us to specify the size of our icons by setting the font style property on the css let's go ahead and copy that and we will add it to our command here next we want to be able to set a title for rsvg component and this will add a title tag to the svg markup and will help with assistive technology to correctly identify it so to do that let's copy this title prop command and add it to our script here uh so this way we'll be able to set the title prop on our components and the last option we'll be setting is called the replace attribute value so what this will do uh it will enable us to replace a specific color in our svgs if one is specified and replace it with the value of current color and this will let us specify the color of our svg icon by setting the color property via css so let's copy this option and go back to our script here now we need to specify the old value and the new value to replace it with so let's go ahead and take a look in our svgs and the value that we want to replace is this one here you'll notice a bunch of them have this color code specified so we want to replace that okay so if we go back to our script we're gonna say want to replace this color and we want the new value to be current color so by setting this when we use our components we'll be able to set the color via css and whenever this color is specified in svg it will take on the color property instead okay so let's save that and now if we run it you can say npm run svgr and as you can see it takes our svg assets and it turned into these react components and put them in the source folder so if we open this up you'll see we've got our react component defined here it's got a couple of props being passed to it title as we uh configured and that sets the arrow labeled by property and then adds the title tag as well and then you'll see the fill got replaced by current color and then you'll notice that a lot of the information that was originally in here cleaned up so in addition to generating the rack components themselves scgr also generates this index file for us where all of the generated components are exported now this is great because this is exactly what we'll need to bundle our code into a publishable npm package rollup is a javascript module bundler and it will help us take our code and bundle it into an es module that we can then publish as npm package the reason i chose rollup is it's easy to configure first of all but it is also very good at generating code that is tree shakeable the tree shaking or sometimes referred to as dead code elimination is the process of when a tool like webpack bundles all of your application code together and it uses static code analysis to go through all your code and figure out what can be removed that is not used in your application so when we bundle our package we want to ensure that it supports the static code analysis as best as it can and rollup is excellent at that this will ensure that we're publishing not only as small of a package as we can but will also help consuming applications reduce the their final bundle size so this will help users on slower networks or on less powerful devices not have to download as big of a javascript file to run an application rollup also has a number of plugins that you can use alongside it and one of the plugins we'll be using is the babel plugin this will enable us to use the babel transpiler alongside rollup which will transform the modern javascript syntax uh so es6 and above into javascript that can run in our target environment which we can specify via the options now to use rollup as well as this plugin we will need to create a rollup config file and in this file we'll be specifying the rollup plugins as well as any of the options that we want to use but before we do that let's install rollup and the plugin itself and these will be dev dependencies as well so if i go back and paste that and then you'll also need to include rollup and now let's go ahead and copy that rollup config that we saw here we'll go back and create rollup config.js and let's paste that in and the first thing we're doing here is we're importing the babel plugin and then we're creating our config so in here we'll see the input as the source and then index file so this is already the same one that we have in here all right and then the output instead of the directory we'll specify file and we will put this into a folder called dist and then we will name the file index.esm.js and then the format will be es module next we'll see that we have our plugin specified so in this case right now we're only using the babel plugin and then it has a couple of options passed to it now let's go ahead and take a look at these options because we'll need to change a couple of them the first one we want to change is the babel helpers now because we're building an npm module that we'll be publishing it's actually recommended to change the default to runtime and this specifies how rollup should bundle the babel helpers into our final bundle now by setting it to runtime we will need to use it within combination with the plug-in transform runtime babel plug-in which we'll get to in a second as well as specifying the babble runtime as a regular dependency in our package we will also need to tell roll up that bubble runtime is an external dependency so we'll need to set the external option this let's go ahead and modify that okay run time and then we will set external to this regex now notice it says that it has to be regex because the helpers are located at the nested paths all right so let's go ahead and copy this and add this to our rollup config so we'll need to specify those as external dependencies and then let's also take a look at the documentation for this uh transform runtime plugin for babel you'll notice that in order to use it we need to specify it as a plugin for babel and the way you do that the rollupconfig is we can set that as an option here like so okay so let's save that and next let's finish installing our dependencies we'll need the babel plugin transform runtime and then also the battle run time itself now one last thing we need to do before we run this is we also need to set our babel presets now because we're writing modern javascript syntax as well as using jsx in our react components we'll need to install the preset env and the preset react babel presets so let's go ahead and do that we said nv and then reset react as well all right now that we've got our dependencies installed and our roll-up configured let's go ahead and finish up the scripts that we will need to actually run all of this so first in our packet json uh the first thing i want to do is add a property called module now this will be the entry point into our package and if you recall we specified output from rollup as this index.esm.js so let's go ahead copy that and specify that in here as well so this this will be our entry point into our bundle next we'll need a command to run rollup and i'm going to put this as a build script because that's what we're actually doing and then to run roll up you just say roll up and because we're using the config file you can just say dash c now if you named your rollup config something different you would have to specify that here but because we're sticking to the default convention you could just say dash c okay and the last thing we want to do is we want to clean up the source folder before it's generated so anytime we build before our build runs we want to ensure that that's cleaned out as well as the folder that will be created by rollup which is called dist so we can run this as a pre-build script so npm will execute this anytime you run the build command and we'll just say rimraf src and rimraf dist so this will remove both the source and the dist folder before the build is run okay and one last thing before we run this um because i don't want to have to run the scgr command myself manually i'm actually just going to add this to our build script here i'll say npm run and cgr like so let's save that and npm run build all right so what's going on here oh oh yeah right so we added our level presets but i didn't actually configure it so to do that we'll need to specify these presets in our babel config file and if we scroll down here we want to just run the default targets that are specified by the preset env and in order to do that we need to set it to the target's default setting like this so i copy that and in our project we'll create a file called dot babble or c and then here we'll paste this and then we'll also need our react preset as well so let's copy that and for this one we'll leave everything to default as well let's save that okay let's try to run this again and there we go our package got generated in the location that we specified now you'll notice that we have a warning here and it says that react is an unresolved dependency now this is because react is also an external module so we actually need to add that to this array here and roll up config so we can just say react let's save that and let's run this again and now as you can see our output is clean great so let's take a look at the file that got generated and if we open this up you'll notice that it contains our react components as well as some of the babel runtime helpers and so on but notice this thing here if you recall i mentioned how rollup is great at setting up the code to be tree shakeable and the way it does is is by annotating our functions with this pure tag so this will tell the static analysis tools too that this this component or this function doesn't have any side effects so it can be safely tree shaken out now one last thing we can add as well is if we want to see the actual size of the package that was generated there's another roll-up plug-in that can do that for us and it's called roll-up plug-in file size so we'll install this as a dev dependency as well and then if we want to use it in our roll-up config we can just simply say import file size rom roll up plugin file size and now we can add it to our plugins area here okay so if we add that there and save and let's run our build again you'll notice we'll get a nice little info screen here with the actual bundle size now there's one last thing we need to do before our bundle can be published as an npm package and that is back in our package.json we need to specify files as the um our output folder so this will takes in an array we just simply need to say dist as our location for our output files all right so let's save that now that we've got our package set up let's actually go ahead and test it in an application so i've already got an xjs app set up this is just a simple starter template and now there's a way to test our package without actually having to publish it to npm and we can do this by running the npm pack command and then pointing to the location the folder where our package is located and this will take anything that would have been published to npm as a package and i will put it in this file here and then all we can do is simply say npm install and then point it to the file alright so now this installed it as a dependency just like it would from npm only instead of going to the registry it looks in the local uh file here all right and now if we go to our index file you'll see that i've already got a couple of the components imported from our package and i just got some simple state here that alternates between the two icons so you can see by default uh we're not providing any of the extra props yet we're not overriding the style this is just what comes out of the box so let's go ahead and run it and we see here that we've got our icon when we press on it it changes to the filled version all right so now let's say i want to change the size and the color of our icon i can do that easily just by setting the style property on our components i can say style and if i want to change the size i'll say font size is equal to a 10 rem like so and let's say for when it's filled i want to also change the color let me just copy that here and then to change the color i can simply say color and then set it to a nice shade of pink okay now as you can see when we press it changes the color and also the size has changed now let's say we also want to add a title hey this is our [Music] outline and then this one a heart filled if we go back our code and inspect the svg you'll notice that the title is set here as well right and that's it that's how simple it is make sure to explore more of the options that are available to svgr if you want to uh play around with it there's also a way to provide your own templates so for example if your component if you're not happy with the component that svgr generates by default you can actually override it and specify your own template um so there's definitely a lot more options uh if you have a more advanced use case right but this gives you an idea of what is possible with this tool so this will be it for today's video i hope you found it useful and learn something new let me know in the comments below if you end up using this approach otherwise thank you so much for watching and i'll catch you all in the next video you

Channel: Mykhaylo Ryechkin

Views: 3,556

Keywords:

Id: v0ZLEy1SE-A

Length: 21min 23sec (1283 seconds)

Published: Tue Feb 23 2021