Devicon font subsetting: limiting woff2 payload when only a handful of icon classes are used

Answer

For a page that uses only a few devicon‑* classes, the most reliable way to keep the payload small is:

• Use a third‑party font‑subsetting utility (e.g., pyftsubset or fontcustom) to build a woff2 file that contains only the glyphs you reference.
• Import the SVG sprite as a module and reference individual icons only when needed. If the sprite is imported as a single file, the whole asset will be emitted; bundlers do not tree‑shake the sprite by default.
• Re‑run the subsetting step whenever you upgrade Devicon to a new major/minor release, because code‑point assignments can change.

Why the full font loads

The npm package ships a single devicon.woff2 (~60 KB) that contains every glyph. When a page includes any devicon‑* class, the CSS imports that font, and the browser downloads the entire file. The package does not expose a built‑in subsetting API.

Subsetting workflow

1. Install pyftsubset (part of fonttools):

   pip install fonttools

2. Create a whitelist file (e.g., icons.txt) containing the Unicode code‑points of the icons you need. You can generate this list by inspecting the CSS:

   grep -oP 'content:\s*"\\\K[0-9a-f]+' node_modules/devicon/css/devicon.min.css | sort -u > icons.txt

3. Run the subset command:

   pyftsubset node_modules/devicon/fonts/devicon.woff2 \
     --unicodes-file=icons.txt \
     --output-file=public/fonts/devicon-subset.woff2 \
     --flavor=woff2 --no-hinting --layout-features=+liga

4. Update your CSS to reference the new font path:

   @font-face {
     font-family: "Devicon";
     src: url("/fonts/devicon-subset.woff2") format("woff2");
   }
   

After this step, only the glyphs you listed will be present, and the file size can drop below 10 KB for three or four icons.

SVG sprite usage

Devicon ships an icons.svg sprite. Importing it as a whole (e.g., import devicon from "devicon/sprites/devicon.svg";) will cause the bundler to emit the entire file (~30 KB). If you need a single icon, you can either:

• Copy the desired element into your own component.
• Use a loader that splits the sprite (e.g., svg-sprite-loader) and reference icons by #icon-name.

Because the sprite is a static file, bundlers do not tree‑shake it; the whole asset will be part of the bundle unless you import only the specific nodes.

Upgrade maintenance

When Devicon releases a new major/minor version, the internal code‑point mapping can change. A previously generated subset may no longer match the class names, resulting in missing icons. The safest approach is to:

• Store the subsetting script and whitelist in your repo.
• Run the script as part of the build whenever the devicon dependency is updated.
• Verify the output by checking the icon appearance in a staging build.

Missing diagnostic detail

To tailor the subsetting command exactly to your project, could you confirm which Devicon 2.x version you are using? The code‑point mapping differs between 2.0, 2.1, and 2.2, and the pyftsubset whitelist must match the installed version.