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.

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