vinayaksh42's Blog

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.

View Blog Post

Weekly Check-In #3

Published: 06/21/2021

Hey all!

What did you do this week?

After getting approval on the new implementation of EOS-Icons React package from my mentors I have started to push commits to main repository. This first pull request was regarding the initial setup of the project which contained the TypeScript configuration, Eslint configuration, package.json setting for publishing it over to npm and git ignore file for ignoring all the build folder. I also made a pull request for the setup of gulp for automating the process of fetching SVGs from "EOS-Icons" npm package. It required me to create functions for copying as well as deleting files.

What is coming up next?

For the next week i am going to be implementing the script for scaffolding React components from SVGs that will be fetched using gulp automation. The component will accept all the required props for modifying SVG as well as be Type safe for supporting TypeScript based React projects.

Did I stuck anywhere?

No, I did not get stuck anywhere but it required me to do a lot of research as well as learning for understanding how gulp works and how to use it for automation.
View Blog Post

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.

View Blog Post

Weekly Check-In #1

Published: 06/10/2021

Hey, my name is Vinayak Sharma, I am a Second-year Electronics and communication engineering student from India. I will be working on creating an icon library for React during Google Summer of Code 2021. I am going to be working with EOS Design System on the project: EOS Icons react library.

About my project:

Currently EOS delivers icons via a set of well documented methods, which chiefly include EOS-Icons Package, CDN or direct download of icons in SVG/PNG formats. With the guidance and help of mentors, I want to develop an npm package that can deliver EOS Icons to its users as an independent component library and create a unified central system that will enable EOS to deliver its icons to various frameworks (e.g. React, Vue and Angular) independently. During the development process my chief goal would be to make this npm package as lightweight as possible in order to reduce the load put on the browser (using the tree shaking approach), which will create a smoother workflow for the users. Creating a central package of EOS Icons that can supply icons across React, Vue and Angular frameworks will go a long way in having a more consistent user experience as well as boost capability to accommodate users who migrate from one framework to another.

What did I do in the community bonding period?

There has been constant communication with mentors regarding the implementation of this project as it is going to be from scratch. I am really looking forward to work on this project. As the org is moving from GitLab to GitHub, I migrated the cra-eos-template repo to GitHub and created the GitHub workflows required for semantic release as it was previously using GitLab ci for semantic release.

What am I doing this week?

This week I will be working on implementing a base version of my project. I will be working with gulp files for automating the workflow of fetching all the different SVGs from the 'eos-icons' npm package.

Did I stuck anywhere?

Yes, I faced a few issues while implementing GitHub workflows as I was not previously well versed with the working of semantic release but with the help of mentors I was able to figure it out and implement the workflow
View Blog Post