Weekly Blog Post #4

Published: 06/28/2021

Hey all!

The third week was full of implementing new features and learning about new concepts.

Script for scaffolding React components

During the third week of the coding phase I worked on the core logic of the project that is the Script responsible for scaffolding the various different SVGs into React components which are JavaScript as well as TypeScript supported. The script can be broken down into a few sub parts for easier explanation.

  1. Fetching SVG data: The first step in order to build out the React component is to fetch the required SVG data from the .svg files. To do this i have used "fs" readFile functionality, it reads the required SVG file and returns the SVG data which is later on used for creating the component.
  2. Props for modification: EOS-Icons natively supports a lot of modifications like color, size, rotation, Horizontal flip and vertical flip. My aim for this step was to add all these modifications as props for the React components. This was possible by simply modifying the SVG data that was earlier fetched in the last step. Currently I have added support for changing color, size, flip as well as rotation. In future more props can be added easily. The size prop and flip prop required extra logic, Basically EOS-icons currently has pre defined sizes like- "s","m","xxl",etc. I have added a size map in order to provide the user with these pre-defined sizes. Similarly i also made a common function for the flip prop incase the user wants to flip the SVG
  3. Writting the components: The last step was to write all the various different SVG components under the destination src/icons/ along with a index.tsx file which is responsible for exporting all the components to the user.

Build commands

The project is completely build in TypeScript but in order to support JavaScript based React projects it required a TypeScript build config for producing files that are supported by JavaScript. The two main build commands produces the project in commonjs (cjs) format as well as esnext format under lib and es folder respectively. These are the folders which will be published on npm and utilised by the users.