Web Fonts, SVG Icons, and Building an SVG Icon Component with Vite and Ant Design Vue

This article is the fourth entry in a series about building a business component library with Vite and Ant Design Vue, focusing on web fonts and SVG icons. It first reviews basic font classifications—bitmap, vector, and stroke—citing Wikipedia and explaining their rendering characteristics and trade‑offs.

There are three basic kinds of computer font file data formats: Bitmap fonts consist of a matrix of pixels representing each glyph. Vector (outline) fonts use Bézier curves and mathematical formulas to describe scalable glyphs. Stroke fonts define glyphs with a series of lines and additional information.

The article then describes how web fonts are essentially vector fonts (e.g., .ttf, .woff, .woff2) and why SVG icons have become the preferred solution for modern websites.

Key advantages of SVG icons over font icons include reliable rendering without loading failures, native support for colors, filters, animations, DOM manipulation, and better accessibility via title and desc elements.

Three common usage patterns for SVG icons are presented:

Direct inline SVG, image, or background usage.

SVG Sprite using <symbol> and <use> (the SVG version of a sprite sheet).

Independent SVG component, e.g., @ant-design/icons-vue style single‑file components.

The article explains the structure of an SVG sprite, highlighting the <symbol> element (which defines a reusable graphic template) and the <defs> container for storing definitions. It notes that symbols can be placed directly under <svg> or inside <defs> , and that each symbol receives an id referenced by use via xlink:href="#id" .

The <symbol> element is used to define graphical template objects which can be instantiated by a <use> element.

To generate the symbols from individual SVG files, the article suggests using Node.js fs APIs to read and concatenate files, or leveraging build‑time tools such as svg-sprite-loader (Webpack) or Vite plugins that create SVG sprites automatically.

Implementation details for an IconSvg component are provided. The component template uses a <svg> element with dynamic width , height , and fill styles, and a <use> element referencing the generated symbol:

<template>
    <svg :style="{ width: `${size}px`, height: `${size}px`, fill: color }">
        <use :xlink:href="`#${iconPrefix}${icon}`"></use>
    </svg>
</template>

<script lang="ts" setup>
import { props } from './props'

defineProps(props)
</script>

To ensure the SVG inherits size and color from surrounding text, the component is wrapped in a <span> so that 1em dimensions and fill: currentColor make the icon align with the parent’s font size and color.

After adjustments, the component renders correctly without explicit size or color props, matching the visual style of inline text.

References

Computer font (Wikipedia)

一种笔划矢量字库的存取方法 (Patent)

In conclusion, the article covers essential font knowledge, the benefits of SVG icons, and a practical guide to building a reusable SVG icon component for front‑end projects.