Weekly Blog Post #2

Published: 06/14/2021

Hey all!

First week of the coding period has come to an end. It was full of learning about new technologies and approaches for implementing EOS-Icons React npm package.

Fetching SVG files from 'EOS-Icons' npm package

The first step for building EOS-Icons React npm package is to fetch all the existing SVG files from the 'EOS-Icons' npm package, in order to maintain a consistency among the Icons that are displayed at EOS-Icons website and React package.

For completing this task i made use of Gulp, which helps in automating slow and repetitive workflows. Instead of using JavaScript i have used TypeScript in my project for providing type safety.

Gulp has namely two different types of composition structure (series and parallel). As the name suggests series is used for executing tasks one after another and parallel is used for executing tasks simultaneously. For copying files i nested all the different tasks into a parallel() composition.

Scaffolding react components using SVG data

The next process involves fetching of all the SVG data in a sequential manner and converting them into a React component. For doing this task i used the fs readfile function for reading all the SVG files sequentially. Later this SVG data was inserted into a React component template and written as a ".tsx" file. For importing all these React components I also scaffolded a index.tsx file at the root level of the project which would export all the components to the user.

Building the project for supporting TS and JS

In order to test the things that I have build till now, I added two build commands. The first build command builds the package using cjs and the second build command builds using esnext. As a result the package works with JavaScript based React projects as well as TypeScript based React projects.

I have also created a detailed readme that includes the meaning of all the commands and a detailed explanation of how the scripts work.

I will get this approach reviewed by my mentors this week and start working on adding props to the React components.