This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Essential: Icon library

Does it really have to?

The 21st century has passed 20 years, the front end has also developed for more than 20 years, with the user’s aesthetic is getting higher and higher, the user experience requirements are also getting higher and higher, I think it is rare to find a mainstream website without ICONS, right?

In the beginning, the icon was mainly based on pictures. In order to optimize and reduce requests, the Sprite diagram concept was introduced, but it was still a picture, and the loading of pictures was always slow. Then came SVG, and it was a little better, but it was also not easy to use, and it was fragmentary.

With the launch of IconFont, font ICONS have replaced the landmarks of image ICONS, although some are still SVG ICONS.

Sprite Image: Multiple small images are combined on a single image. The background-position property controls the restricted area.

Advantages: Fewer requests

Disadvantages: Only suitable for small pictures, and poor scalability.

(Network map, invasion and deletion)

So back to the point, does it really have to?

In terms of size, the size of a picture is fixed, and the size starts above 2K, but it will paste on a large screen.

From a voluntary request point of view, the font icon library is directly introduced into the project, while the image icon requires multiple requests.

For convenience, font ICONS can be directly referenced by an alias, whereas images require a list of addresses.

One thing to note is that the iconfont is technically someone else’s child. You can take it back and make it your own, but to announce it to the world as your child (commercial), you still need to apply for adoption with the biological parents (authorization).

Don’t want to adopt it doesn’t matter, today’s article is to learn if you make a baby out, after learning to make a baby, also afraid of no baby?

Afraid, of course, they will not art or no art, but also difficult to make bricks without straw.

How do you build it?

This piece of art, of course, is to need their own way, this article is just responsible for telling you how to make a healthy, consistent baby.

Health: refers to the normal use of the font icon;

Consistent: icon only consistent, beautiful to see the individual play.

foreplay

Start with Adobe Illustrator, then go to iconFont – Help Center.

Find the. Ai file in the picture below, click and download, and download the template file to the local PC.

After the download is complete, open it with AI software, drop the icon to be made into a member of icon library in the local, and then stretch it to the same size according to the guide in the website. There is no need to worry about the size of the exported file, because the exported file is an SVG file, which is relatively small, and it will be made into a font, which is smaller.

At this point, you have an SVG image with the same size. If you don’t think you need to understand the previous content as the front end, then I suggest that you pull up the design and register a gold account to look at it, and give me more like, hee hee hee;

Prepare for the

Now that we have an icon ready to be incorporated into the icon library, it’s time to start the second part of making them into a font file.

Open another site, iconmoon. IO, where the next work from SVG to TTF will be done.

When opened, you can see that it is a default icon library, ignore it, as shown in the figure, empty the default library.

Once you’ve cleared them, click on the purple button “Import Icons” and add the Icons you’ve just finished.

The newly added icon, such as the style on the left, needs to be clicked, and then as shown in the image on the right. The selected style indicates that the added icon is confirmed.

Then click the lower right corner to come to the interface as shown in the picture. You can set a name in the icon here. I set it as common-Star, which is the icon name used in the project later.

After configuration, click download in the lower right corner to download.

Once downloaded, you can see the following files, including a JSON file that you can use to re-import the icon.

The fonts directory contains our final generated font file.

Into the library

All the preparatory work has been done. The next step is to make it into an icon library.

Unlike iconFont, iconfont is already imported and used directly by the iconFont class name.

What I want to do here is make it a library of ICONS, and use it as a component.

Let’s create the file structure

Root/SRC/components | | - the ICONS | - the ICONS. Js / / store all of the fonts icon alias | - the ICONS. Vue | - index. Js / / export | - iconmoon. The vera.ttf / / copied font libraryCopy the code

Let’s start with something simple:

Open the zip package you just downloaded from Iconmoon and copy the font files.

OK, end. Nice!

And then a little bit of complexity

Open the icons.js file

export default {
 // The key name is the name of the reference, followed by the character encoding, manually add '\u', and copy the character entity generated by iconmoon
    "common-star": "\ue900" 
}
Copy the code

And then a little bit more complicated. I’ll just post the code here

<template lang="pug">
block content
div(
  class="yx-icons" 
  @click="onClick"
  :style="{ 'color': color, 'font-size': `${size}px`, 'height':`${size}px` }"
) {{ icons[type] }}
</template>
Copy the code

The structure part is just a simple rendering, mainly depends on the js part of the value

<script setup>
import {defineEmit, defineProps, reactive} from 'vue';
import iconsList from './icons.js';

const emits = defineEmit(['click']);
const props = defineProps({
  type: {
    type: String.default: ' '
  },
  color: {
    type: String.default: '# 333333'
  },
  size: {
    type: [Number.String].default: 16}});// Introduce the icon. Js that you just wrote. The returned object is used to render the icon
const icons = reactive(iconsList);
// In some cases, it is necessary to add an icon click event.
const onClick = (e) = > {
  emits('click');
}
</script>
Copy the code

The CSS section is also simple. Just post it and make a custom font using the icon font file.

<style lang="scss" scoped>
@font-face {
	font-family: yxicons;
	src: url('./icomoon.ttf') format('truetype');
}

.yx-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: yxicons;
}
</style>
Copy the code

At the end

Now that we’ve learned how to make a baby, ask a design guru to read the first half of this article and finish the second half yourself.

As the saying goes: what what collocation, work is not tired.

I hope you can work happily and live seriously.