Information Gethering
I was researching for a library of icons that uses the pseudo-element to draw the icon itself and not uses any font icons like the font-awesome library. I found this site that shows a list of icons that draws icon using the pseudo-element, it was developed by Nicolas Gallagher. It was the perfect library but there was a problem. All of the icons only have one size of 16x16 It was not size-adjustable. So I needed to rewrite his library using SASS and make it adjustable by size.
Development
I needed to set up the container and its element tags to start at 16x16 but adjustable up to 96x96 pixels during the development. So I assigned some 16 variables with a value of 100 percent divided by 16. Meaning, the "$icon-spacer-01" has a value of "6.25%", therefore it is a 1 pixel of 16x16, 2px of 32x32, and so-on. I also need to dynamically implement some fixed value in rem for the border then automatically resizes as the icon increases its size.
Adjustments
Some minor adjustments were needed and wanted. I've added a mixin to generate the layout of the file icon to easily add more with just the color and the text. I've added a gradient mixin generator. And added a smiley generator. The project is constantly in work-in-progress as from time to time I add more icons and features, I may add looping animation, on hover effect, focus, and active state.