The third week was full of implementing new features and learning about new concepts.
Script for scaffolding React components
- 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.
- 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
- 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.