Step by step to create a pure CSS icon library

Here, finish this amway

The purpose of writing this article is to take a look at my icon library:iconooSo, straight to the point, star young ladies! (Should I add a Github mutual star group?)

Having said that, let’s talk about the theme.

In Web development, we often use small ICONS (add and subtract check boxes, etc.). There are two common approaches:

1. Use pictures directly;
2. Use CSS/SVG to draw ICONS directly in the browser.

Scheme 1: Due to the large number of icon pictures and small size, Sprite image is often used to piece together ICONS in the same picture in order to reduce requests. As you can imagine, a bunch of Sprite ICONS, modify maintenance will be quite troublesome! A better solution now is to use WebPack to import images, and the small images are directly converted to Base64 and inserted into CSS. It’s easier to use images directly, which is the current mainstream approach.

Scheme 2: Compared with scheme 1, the volume of resources can be significantly reduced. Only a few CSS/SVG commands are needed to draw beautiful ICONS, which are not limited by the size of images and can be large or small. The stack of code in Scenario 2 might seem very difficult at first glance, but many of the simple ICONS are actually very easy to implement.

Now it’s time for the girl’s most anticipated uncle Tomato fruit hand to hand teaching.

Hand grasping hand teaching time

Using CSS to draw lines, you use just two attributes: border & box-shadow. The shape can be controlled by border-radius and transform, and the position can be adjusted by absolute positioning, transform, margin and other attributes. CSS graphics, do a few know about what is going on, in the final analysis, or geometry. If geometry burns your brain, use iconoo directly

Basic principle said, next to masturbation, first look at the simplest plus sign:

.plus {
    box-sizing : border-box;
    display    : inline-block;
    position   : relative;
    font-size  : 20px;
}

.plus:before, .plus:after {
    content        : '';
    pointer-events : none;
    position       : absolute;
    left           : 50%;
    top            : 50%;
    transform      : translate(-50%, -50%);
    box-shadow     : inset 0 0 0 1em;
}

.plus:before {
    width  : 1em;
    height : 2px;
}

.plus:after {
    height : 1em;
    width  : 2px;
}Copy the code

The code is still very simple, first we use before and after two pseudo-classes to add available tags, otherwise there is only one tag, to play out the flower is really difficult. Content, as the name suggests, can be filled with various characters, even control characters such as newlines. Pointers-events: None eliminates mouse pointer events, making the element penetrable. The core of the drawing is to draw horizontal and vertical lines by setting the width, height and shadow of the two pseudo-classes. In terms of position, absolute positioning + reverse offset is adopted to skillfully use the different percentage reference of these two attributes to achieve the center of horizontal and vertical lines. All dimensions except line width (2px) use the relative unit em, so adjusting the value of font size will adjust the size of the icon. To adjust the line width, change all the px units at once.

Advanced play

First take a look at this image icon:

This graphic should be more said online, however, I saw the first time or meng forced… After analysis, the outermost border can obviously be made with border, and it is also very simple to make dots with before. The key is how to draw the two mountains? Box-shadow can be used to create multiple borders, and then add a rotation to create a box shadow. Finally, hide the parts outside the border. The drawing process is as follows:

.icon-img {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 90px;
    height: 80px;
    border: 5px solid;
    border-radius: 10px;
    color: #2ba5bb;
    overflow: hidden;
}

.icon-img:before,.icon-img:after {
    content: '';
    pointer-events: none;
    position: absolute;
}

.icon-img:before {
    width: 10px;
    height: 10px;
    top: 18px;
    right: 20px;
    box-shadow: inset 0 0 0 1em;
    border-radius: 50%;
}

.icon-img:after {
    width: 60px;
    height: 50px;
    left: 0;
    bottom: -27px;
    box-shadow: inset 0 0 0 50px,30px -20px 0 0;
    transform: rotate(45deg);
}Copy the code

The code was put together AD hoc, so it didn’t make em units. Well, why em units?

When we use ICONS, the size may be different each time, but the icon size is related and adjustment is quite laborious. Of course, you can think of using zoom and scale, but the width of the zoom line will also change. To set em, set the font size at the icon level. Then the icon itself and its descendants are referenced by this font size.

Here’s another one with deformation:

It’s easy to see how it’s drawn, and the geometry is relatively simple, but it’s very complicated to map to the rules of CSS. First look at the flow:

.icon-codepen { display: inline-block; position: relative; box-sizing: border-box; color: #2ba5bb; width: 2px; height: 10px; box-shadow: inset 0 0 0 32px,0 15px,-11px 7px,11px 7px; } .icon-codepen:before, .icon-codepen:after { content: ''; pointer-events: none; position: absolute; width: 11px; height: 4px; } .icon-codepen:before { right: 2px; top: 3px; The transform: skew (0, - 35 deg) scaleY (0.6); box-shadow: inset 0 0 0 32px,0 13px,11px 26px,12px 39px; } .icon-codepen:after { left: 2px; top: 3px; The transform: skew (0, 35 deg) scaleY (0.6); box-shadow: inset 0 0 0 32px,0 13px,-11px 26px,-12px 39px; }Copy the code

The difficulty lies in the deformation of length and width. The simple way to solve the deformation is to use transformation matrix. If you don’t learn graphics well, it can be painful. If you don’t go for single labels, you can represent each edge with a label, which is easy to deal with.

Uncle, I’m trying to be a dick

How’s that？ Think these are gadgets? Trying to be a pussy? Okay, uncle!

Mona Lisa? What the hell? Will I tell you that this can also be drawn with a single tag pure CSS?

Codepen. IO/jaysalvat/p… Look at the Mona Lisa made up of thousands of box-shadow, and I can see that my endocrine is out of balance…

Static isn’t enough, let’s do something dynamic:

Codepen. IO/FBRZ/pen/IQ… Don’t say much, thank you!

For more CSS gadgets, check out codepen! If codepen doesn’t work, go to my blog and download the CSS file. What, no download link? F12 big way up!

Echo of fore and aft

My Chinese teacher said that the article should echo the sublimation theme from the beginning to the end, so one more time:iconooSo, straight to the point, star young ladies!