The original chenkai. Life/web/use_ico…

Talk about how ICONS work in Web projects

A single icon

We can choose to refer to icon files such as PNG, SVG and so on separately. This method has obvious disadvantages. It is not easy to maintain when there are more ICONS

The font file

With the font-face, we can specify a custom font to display the text. The font file is like an SVG inside the font file. We can define the shape of the characters in the font file.

We can use these ICONS by using the font encoding of the corresponding font file, such as a close icon below

<i class="iconfont">&#xe64f; </i>
Copy the code

The obvious downside of this is that the icon is not intuitive and it is hard to follow the instructions of 3 Knowing what icon it is, we can transform it into a custom class reference by defining the ::before content of the CSS icon in advance

.icon-close:before{
	content: "\e64f"
}
Copy the code

We can then use this in our pages

<span class="iconfont icon-close"></span>
Copy the code

Using ICONS in this way has the following characteristics because it is a font format

  • Best compatible, support IE6 +, and all modern browsers.
  • Support to dynamically adjust icon size, color and so on according to the font.
  • Multi-color is not supported.

The symbol referenced

The symbol element is used to define a graph template object, which can be instantiated with a use element. A symbol element itself is not rendered. Only instances of the symbol element (i.e., a use element that references the symbol) can be rendered, as in

  <svg>
    <! -- symbol definition NEVER draw -->
    <symbol id="sym01" viewBox="0 0 150 110">
      <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red" />
      <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white" />
    </symbol>

    <! -- actual drawing by "use" element -->
    <use xlink:href="#sym01" x="0" y="0" width="100" height="50" />
    <use xlink:href="#sym01" x="0" y="50" width="75" height="38" />
    <use xlink:href="#sym01" x="0" y="100" width="50" height="25" />
  </svg>
Copy the code

Symbol is global in scope and can also be used independently in SVG

  <svg>
    <! -- symbol definition NEVER draw -->
    <symbol id="sym01" viewBox="0 0 150 110">
      <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red" />
      <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white" />
    </symbol>
  </svg>
  <svg>
    <use xlink:href="#sym01" x="0" y="0" width="100" height="50" />
  </svg>
Copy the code

We also support SVG with some CSS tricks, just like fonts, to adjust styles via font size and color.

.icon {
  /* em makes width and height equal to font size */
  width: 1em;
  height: 1em;
  /* Inherit the parent color property */
  fill: currentColor;
}
Copy the code
<svg class="icon">
  <use xlink:href="#icon-close"></use>
</svg>
Copy the code

Common icon library comparison

Common icon libraries include Ali iconfont, Byte IconPark,

Iconfont characteristics

  • Support to upload their own icon, and the icon according to the project management

  • Only fonts and symbol references are supported, and individual ICONS can be downloaded in SVG or PNG format

  • Support for file imports can be used with any framework

Iconpark characteristics

Unlike iconFont, it does not use a symbol reference. Instead, it is compiled into components using modern framework code, allowing for more granular customization of the framework icon.

  • Only official SVG ICONS are included. The advantage is that the icon style is more uniform

  • More customized transformations can be made to attributes such as icon size, color, wireframes, and endpoints

  • You can export multiple icon component codes across platforms, including React, Vue2, Vue3 formats

Although no symbol reference is used, multiple references to the same icon do not add to the packaged code. In VUE, the font components are compiled as follows.

var dj, pj, hj, mj = (pj = !1, hj = function(e) {
  return Ao("svg", {
    width: e.size,
    height: e.size,
    viewBox: "0 0 48 48".fill: "none"
  }, [Ao("path", {
    d: "M9 18V42H39V18L24 6L9 18Z".fill: e.colors[1]},null), Ao("path", {
    d: "M9 42V18L4 22L24 6L44 22L39 18V42H9Z".stroke: e.colors[0]."stroke-width": e.strokeWidth,
    "stroke-linecap": e.strokeLinecap,
    "stroke-linejoin": e.strokeLinejoin
  }, null), Ao("path", {
    d: "M19 29V42H29V29H19Z".fill: e.colors[3].stroke: e.colors[2]."stroke-width": e.strokeWidth,
    "stroke-linejoin": e.strokeLinejoin
  }, null), Ao("path", {
    d: "M9 42H39".stroke: e.colors[0]."stroke-width": e.strokeWidth,
    "stroke-linecap": e.strokeLinecap
  }, null)])}, {name: "icon-" + (dj = "home"),
  props: ["size"."strokeWidth"."strokeLinecap"."strokeLinejoin"."theme"."fill"."spin"].setup: function(e) {
    / /...}});Copy the code

Where our components are used such as

<home theme="filled"/>
Copy the code

Is compiled into a function call of the following form

P(u, {
    theme: "filled"
  })
Copy the code

How to choose

How to choose these two ways can we consider the following situation

Choose iconfont

  • The UI or product wants to use its own icon

  • ICONS need to be managed

  • Front-end projects are not React, Vue2, Vue3 frameworks

  • I want to make it easier and more flexible to use

Choose iconpark

  • You need to make it easier to customize your icon
  • A responsive change to the icon style is required in the project