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('<svg');
  const str = result.slice(index);
  const svgNode = $(str);

  $('svg').attr('viewBox', svgNode.attr('viewBox'));
  const findPath = svgNode.find('path');
  if (!findPath.length) {
    message.error('图标错误，不存在path');
    return '';
  };
  findPath.each((i, el) => {
    $(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.