I hope you found this post helpful in some way. If any of you readers find that there’s a simpler way of this approach. I have a better understanding of how icons are used in React through a package while refining my skills in keeping my code DRY. This exercise was a great learning process and experience. import React from 'react' import export default IconBtnSectionSetup Final Thoughts Weve tested and used these icon sets ourselves as preferred alternatives to Bootstrap Icons. This prop was wrapped around with a Link prop from react-router-dom which was wrapped again around a button element. Next, I created a presentational component called ButtonSetUp where I labeled the group of array to map the icons within the FontAwesomeIcon prop from the react-fontawesome package. In a single collection, Font Awesome is a pictographic language of web-related actions. I created a group of arrays for each type of icon based on the background or lack of one - simple, square, and circle.Ĭonst brandsSimple = const brandsSquare = const brandsCircle = Ģ.I refactored the code into bite-size importable components. I had a lot of repeated code and I was determined to keep it DRY. Setting up these examples in React was difficult. The Process of Designing the Buttonsĭesigning these icon buttons was great practice on learning how to write clean code. It’s the most adaptive to customized shapes creating a clean design. As shown in the above figure, the vertical line next to the icons of the upper and lower input boxes is not aligned up and down. I personally prefer the icons without the background. Icons with a Circle background Verdict on Design 2
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |