Building a Simple Icon Management System with Iconfont and JavaScript

Introduction – The author prefers Alibaba's component services and focuses on icon management. After the official Iconfont site became unavailable, they decided to build a custom solution for uploading SVG icons, converting them to symbols, and delivering them as a JavaScript file.

Requirements – Users need to upload design‑ready SVG icons, view them on the server, and bundle them into a single .js file that can be loaded into a project.

Preparation – The author examined Iconfont's demo, noting that the service uses a single svg tag containing multiple symbol elements, each identified by the original SVG name.

Frontend Development – The workflow consists of three steps:

Read the uploaded SVG file as text using FileReader.readAsText . const fileParse = (file) => { return new Promise((resolve) => { const fileReader = new FileReader(); fileReader.readAsText(file, "UTF-8"); fileReader.onload = (e) => { resolve({ content: e.target?.result, name: file.name }); }; }); };

Manipulate the SVG string with cheerio to wrap paths in symbol elements, clean up attributes, and preserve fills. const handleUploadSvg = ($, result) => { let index = result.indexOf(' { $(el).removeAttr('id'); }); const gDom = svgNode.find('g'); gDom.each((i, el) => { const path = $(el).children('path'); const fill = $(el).attr('fill'); if (fill && fill !== 'none' && path.length && !$(path[0])?.attr?.('fill')) { $(path[0])?.attr?.('fill', fill); } }); removeArrtId($, gDom); if (gDom.length) { $('svg').html(svgNode.html()); } else { $('svg').html(svgNode.find('path')); } return $.html("svg"); };

After processing, the new SVG source is ready and can be displayed correctly in the front‑end.

Backend Development – The back‑end simply receives the processed SVG string, concatenates it with other icons, and serves the combined file through a GET endpoint that mimics Iconfont's iconfont.js . Accessing the endpoint via a browser confirms successful deployment.

The article concludes with a note that additional third‑party libraries were explored and may be covered in future posts.