Example of generating icon bundles

This tutorial is a part of Iconify icon bundles tutorial.

Below are several examples of scripts that generate icon bundles. You can use code from these examples to create your own bundle script.

All examples assume you either:

  • Understand basic JavaScript, have Node.js installed on your computer and you know how to use it.
  • Know PHP and have it installed on your computer.

Preferred method is JavaScript. If you are creating web pages, you are working with JavaScript anyway, so why not use it to build stuff?

SVG Framework

Examples for creating bundles for SVG Framework:

Components

Examples for creating bundles for various Iconify components (React, Vue, Svelte):

Code differences

What's different in SVG framework and component bundle scripts?

  • Header. In bundle for a component code starts with an import statement.
  • Function. In SVG framework code uses Iconify.addCollection(), in component code uses imported addCollection().