As you might already know I have created recently css.gg a pure CSS Icon library.
So now on the v2 I am trying to add 200 more icons for a 700 total.
This library has some restrictions such as:
- Single HTML tag
- No colored negative space, only transparent
- Scale Good
- No path
- No data-uri PNG or SVG
So everything is harder as if I would do it on multiple tags and not transparent.
So here is my approach.
Step 1
First I created as usual a circle with 2px border and note how I do not specify when not needed the color so it inherits from the parent, when is a must I use currentColor.
.gg-yinyang {
box-sizing: border-box;
position: relative;
display: block;
/* ^ this is only to contain the icon as box is applied on all icons */
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 22px
}
Step 2
Now second step to create pseudo elements with half of the parent width minus the border and positioned center vertically. I do always fixed pixels to contain it and for better cross-browser support.
.gg-yinyang::after,
.gg-yinyang::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 8px;
height: 8px;
border-radius: 10px;
top: 4px
}
Step 3
The ::before
pseudo selector needs to be on the left and with standard border
.gg-yinyang::before {
border: 2px solid;
left: 0
}
Step 4
Now comes the most challenging, tricky & ugly part where I cover the rest of the area with the box shadow of the ::after
pseudo selector
.gg-yinyang::after {
border: 2px solid transparent;
right: 0;
box-shadow:
inset 0 0 0 4px,
0 -3px 0 1px,
-2px -4px 0 1px,
-8px -5px 0 -1px,
-11px -3px 0 -2px,
-12px -1px 0 -3px,
-6px -6px 0 -1px
}
Final Result
Animated
This version also has as unit em
where I am looking to switch for all the icons, better performance specially on animation.
For more please check the current icons on github and give it a ⭐ if you like it.
astrit / css.gg
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API
Demo - Figma - Twitter
Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API
New in 2.0
🥳 200 New Icons
🚀 SVG Icons
🔥 SVG Sprite
💅 Styled Components
⚛️ React Local Styled Components
🦄 Figma Components
🔮 Adobe XD Components
Table of Contents
Would love to see your approach on this with as less CSS as possible.
AM
Top comments (1)
You are crazy, and I love it !