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-app
Create 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 successfully
svg
Icon (must besvg
Oh π)
- 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-app
Create 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
FontClass
The way needs to beglobal.less
File importcss
Files, if usedi
The label orspan
Tag import is available at π£.
<i className="iconfont icon-xuqiudengji"></i>
Copy the code
Symbol
Mode without introductioncss
Files because we’re indefaultSetting
Is already configuredjs
File. Go straight to the aboveSymbol
You 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-cli
Set up thevue
project
All the methods provided by Alibaba can be used, but there are differences in the location of introduction.
- FontClass in the entry file
main.js
To 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 file
main.js
To 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 maintainsvg
Icon, 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 ourselvessvg
ICONS 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