Strong confidence, can make ordinary people do amazing career πŸ‘»

preface

Why do we use a font icon? A lot of you think, well, the picture already meets our daily needs and why do we need a font icon. (Type on the blackboard πŸ‘¨πŸ’»)

  • Fast loading speed, small size 🎈.
  • Font icon color and size can be set, if using a picture can only be changed to a picture 🎭.
  • The font icon has independent resolution, both web πŸ’» and mobile πŸ“± have a good display.

Font icon tool selection

  • Alibaba Vector icon library
  • icomoon
  • Font Awesome

As our company uses Alibaba vector icon library to generate, I will take this as an example in the following sharing. Other tools are similar 🎨

Different framework introduction of the way more or less will be different 🧐, I commonly used to several ways to beep beep, please jun xiana β™₯.

usecreate-react-appCreate project to introduceiconfont

If you don’t know how to use create-react-app to create a project, see here

First of all, we should be clear that the front-end engineer is mainly responsible for the display of ICONS, creating ICONS of these small UI designers must be handy 😏, we can give him, if the company does not have UI designers, do not be afraid. The icon library provides quite a few ICONS. I’m sure you can find the one that belongs to you.

  • Sign up, log in (not to mention πŸ˜€)
  • Click xiaoyun upload after login successfullysvgIcon (must besvgOh πŸ˜™)

  • Select the first box (supports multiple simultaneous uploads)

  • Choose whether to remove color according to your needs.

  • Hover the mouse to upload the icon and click on the shopping cart (support batch add shopping cart, free of charge 🀣)

  • Download the code

After downloading the code successfully, double click to open the folder belowdemo_index.html

There are three kinds of citation methods and this article will only cover the latter two (the first one is really not often used πŸ˜‘). These three differences are clearly stated in demo.html, so I won’t try to teach you how to use axes πŸŽ‰.

FontClass

Open the react project, create a new folder under the public folder, name it font(whatever you want), and copy the downloaded icon code to the font directory demo.html and demo.css.

Then add iconfont. CSS to index.html

<link rel="stylesheet" href="./font/iconfont.css">
Copy the code

Then bind the class name to any global page using the tag (I or SPAN is recommended).

<! The default is the file name of the SVG icon. -->
<i className="iconfont icon-xxx"></i> 
Copy the code

NPM start completed 🎨(Contact me if not successful!)

Symbol

Introduce iconfont. Js in index.html

 <script src="./font/iconfont.js"></script>
Copy the code

Global arbitrary page use

<svg class="icon" aria-hidden="true" width="50" height="50">
  <use xlink-href="#icon-xxxx"></use>
</svg>
Copy the code

Start project NPM start you found that you failed, WTF😲 I this completely according to the document copy and paste ah, why failed! . Don’t forget that we’re writing HTML in JSX and it’s a little bit different than normal HTML and we’ll change it to this after we look at the documentation.

 <svg class="icon" aria-hidden="true" width="50" height="50">
      <use xlinkHref="#icon-dapingzhanshi"></use>
 </svg>
Copy the code

usecreate-react-appCreate a custom icon using ant. Design in the project

Ant. Design provides a wealth of ICONS, but sometimes the ICONS it provides don’t meet our daily needs. We can either use the above two methods provided by Alibaba or use the default method provided by ant.design

The introduction of ant. Design may vary from version to version, and the specific introduction will be based on the official website

Note: the address corresponding to scriptUrl is the JS file we introduced in Symbol mode. If the JS file is placed in the public directory, there is no need to use require, because public will not participate in packaging.

Projects created using ant.desin.pro introduce IconFont

For the project built with ant.design.pro, there is an iconfontUrl field in SRC/defaultsetting. js. Place the font file downloaded previously under public/fonts and import js file.

Usage:

  • If it is the route menu, it is ok to write the corresponding icon name after the icon attribute in the route.

If it is a page display icon

  • FontClassThe way needs to beglobal.lessFile importcssFiles, if usediThe label orspanTag import is available at πŸ“£.

<i className="iconfont icon-xuqiudengji"></i>
Copy the code
  • SymbolMode without introductioncssFiles because we’re indefaultSettingIs already configuredjsFile. Go straight to the aboveSymbolYou can use πŸ“£.
<svg className="icon" aria-hidden="true" width="50" height="50">
    <use xlinkHref="#icon-xuqiudengji"></use>
</svg>
Copy the code

Of course, Ant. Design. pro is also integrated with Ant. Design and can be introduced using the default methods provided by ant.

usevue-cliSet up thevueproject

All the methods provided by Alibaba can be used, but there are differences in the location of introduction.

  • FontClass in the entry filemain.jsTo introduce the font CSS file

Use the following tags on any global page.

<i className="iconfont icon-xuqiudengji"></i>
Copy the code
  • Symbol is in the entry filemain.jsTo introduce the font js file

Use the following tags on any global page.

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-aliens-ip"></use>
</svg>
Copy the code

How do I automatically update SVG font ICONS

One of the problems you’ll notice if you get used to this is that every time a new icon is added we repeat the same action upload all SVG > Download icon code > Replace font folder. It wasn’t too much trouble, just a few minutes. We certainly don’t want to keep doing the same things over and over.

Links to online

Alibaba is still strong! He provides an online link πŸ˜ƒ, as long as we add ICONS in the icon library project, he will automatically generate links, which is equivalent to we do not need to download the icon code, directly use his online links can be FontClass and Symbol. Knock on blackboard πŸ“!!

Process is probably so, we need to create a project in the alibaba symbol library, and then the icon you want into your own project, he will automatically generate links to online, we don’t need the download icon code to your own project, the above directly to the local path to his online link is ok. Good job 🀣

Of course, the disadvantages are also very obvious, this way is equivalent to Alibaba to help us maintainsvgIcon, if one day the link is out of order, the network is out of order, the leader will still find you. It’s just that it’s a quick and easy way to do it, and we maintain it ourselvessvgICONS are the way to know.

svgtofont.js

Create a new project and name it svgToFont. In this folder, run NPM init –yes. In the svgToFont folder, create a new folder and name it SVG

npm init --yes 
npm install svgtofont --save
Copy the code

After installation, create an app.js file and copy the following code into app.js

const svgtofont = require("svgtofont");
const path = require("path");

svgtofont({
  src: path.resolve(process.cwd(), "svg"), // SVG icon directory path
  dist: path.resolve(process.cwd(), "fonts"), // Output to the specified directory
  fontName: "iconfont".// Set the font name
  css: true.// Generate a font file
  startNumber: 20000.// Unicode start number
  svgicons2svgfont: {
    fontHeight: 1000.normalize: true
  },
  website: null // There is no demo HTML file
}).then(() = > {
  console.log('Build complete! ');
});;
Copy the code

Then execute Node app.js in the root directory of your project and, unsurprisingly, you’ll find a fonts directory that contains basically the same code as the alibaba icon library download. Also in accordance with the above provided in those ways, for introduction, use can be. But now we have to maintain our own SVG ICONS.

Note that symbol references are a little different, because after the font icon is generated you will find that there is no js file, so use the symbol. SVG path. Attached is the xlinkHref corresponding path detailed explanation, I have this path for a long time 😣.

<svg>
  <use xlinkHref="/font/iconfont.symbol.svg#iconfont-aliens-ip"} ></use>
</svg>
Copy the code

webpack-iconfont-plugin-nodejs

The basic principle of webPack plugin is to listen for changes in SVG files. When SVG files are modified, added or deleted, the corresponding font icon code 🎍 will be generated.

  • Methods a

We can maintain our SVG icon (similar to svgtofont. Js)🧡 as a new project.

  • Way 2

Since webpack-iconfont-plugin-nodejs supports hot loading and can listen for changes of SVG files in real time, we can also use it in WebPack plug-in, which needs to copy all SVG ICONS to the project instead of creating a new project to maintain. πŸŽƒ see here for specific usage

conclusion

All in all, in the daily development, font icon is particularly common, the above several ways, should be able to meet the basic development of 🧐, if there is a big man and more elegant way, welcome to the comments section of my education, progress together 🀣.

Refer to the article

svgtofont

webpack-iconfont-plugin-nodejs

Menu bar custom ICON

symbol