Using SVG symbols to build a complete guide to icon system

Time:2020-3-24

From the initial use of img pictures to the later use of CSS sprite to reduce server requests, to the popular graphic Font Icon iconcont. Now, a new way of using icons has become popular – SVG symbols.

Working principle

How SVG symbols work: the symbol element is used to define a graphic template object, which can be instantiated with a use element.

The function of symbol element to graphics is to use it multiple times in the same document. Symbol element itself is not rendered. Only instances of the symbol element (that is, a use element that references the symbol) can be rendered:

<svg>
  <symbol viewBox="0 0 24 24" id="heart">
    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
    </path>
  </symbol>
  <symbol viewBox="0 0 32 32" id="arrow">
    <path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z">
    </path>
  </symbol>
</svg>

This code uses SVG symbols to define two icons. Each symbol element defines an icon. The icon ID is heart and arrow, which are placed in the body element of the HTML file.

The icon with ID heart is referenced by the following code:

<svg>
    <use xlink:href="#heart"/>
</svg>

Xlink: the value of the href attribute is the ID name of ‘#’ plus symbol, so you can reference different icons by changing the value of this attribute.

Automated processing

For more information, please refer to the original text: Complete Guide to establishing icon system with SVG symbols