In addition to images, we often use font ICONS to display images. In fact, we will generate a vector icon library in SVG file or download a vector icon library directly from the web, then we set @font-face to import the font file and name it, and then set font-family in CSS to our vector icon library name to reference the font.

Download a vector icon library

There are some ready-made vector icon libraries you can use, directly download the desired vector icon library, resulting in several files similar to the following, the actual meaning of these files are the same, but different browsers compatible with different formats, generally these formats are enough.

Creates a vector icon library

We can also generate these files ourselves, create a new SVG folder, and use the webpack-iconfont-plugin-nodejs plugin to generate these files from SVG files. You can see the official documentation for the configuration of the following paths.

const WebpackIconfontPluginNodejs = require("webpack-iconfont-plugin-nodejs");
const path = require("path");

new WebpackIconfontPluginNodejs({
  fontName: "icomoon",
  svgs: path.join(__dirname, ".. /src/global/fonts/svg/*.svg"),
  fontsOutput: path.join(__dirname, ".. /src/global/fonts/font-family"),
  cssOutput: path.join(__dirname, ".. /src/global/scss/font.scss"),
  formats: ["ttf"."eot"."woff"."svg"],
  htmlOutput: false,
  cssPrefix: "icon",
  cssFontPath: '~global/fonts/font-family',
})
  .build()
  .then();
Copy the code

This file will help us to generate a style files automatically, here I set the font style of SCSS file path to the SRC/global/SCSS font. The SCSS.

Set font-face to import the font file and set the value of get font-family to iconmoon

Font -face to define the font file’s source name

@font-face {
    font-family: icomoon;
    src: url("~global/fonts/font-family/icomoon.eot"); src: url("~global/fonts/font-family/icomoon.eot? b0958f62#iefix") format("embedded-opentype"),
             url("~global/fonts/font-family/icomoon.woff? b0958f62") format("woff"),
             url("~global/fonts/font-family/icomoon.ttf? b0958f62") format("truetype"),
             url("~global/fonts/font-family/icomoon.svg? b0958f62#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}
Copy the code

Set font-family to IComoon in the CSS

[class^="icon"], [class*=" icon"] {
    font-family: 'icomoon'! important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; }Copy the code

This can be displayed by setting icon-xxx to the class name

<div class="icon-Business"></div>
Copy the code