Icon bundles for Iconify SVG framework

This tutorial is a part of Iconify icon bundles tutorial.

Iconify SVG framework supports 2 ways of adding icon bundles:

  • Loading icon bundles before loading Iconify.
  • Loading icon bundles after loading Iconify.

If you want to skip boring explanation, scroll down to "How to automate build process" section.

Including SVG framework

There are different ways to include SVG framework:

You can bundle SVG framework and icons, then link to a big bundle:

<script src="/assets/iconify-bundle.js"></script>

If you bundle SVG framework and icons, you can use any method of including icon bundle.

Separate files

Bundling SVG framework and icons is not always an option. It requires coding. It is easier to link to the latest version of SVG framework and to bundle separately.

There are several ways you can link SVG framework and icon bundle separately.

You can load script and bundle in <head> section:

<html>
   <head>
       <script src="https://code.iconify.design/2/2.0.4/iconify.min.js"></script>
       <script src="/assets/icons-bundle.js"></script>
   </head>
   <body>
       <!-- content here -->
   </body>
</html>
Loading bundle after SVG framework in head section.
<html>
   <head>
       <script src="/assets/preload-icons-bundle.js"></script>
       <script src="https://code.iconify.design/2/2.0.4/iconify.min.js"></script>
   </head>
   <body>
       <!-- content here -->
   </body>
</html>
Loading bundle before SVG framework in head section.

You can load script and bundle inside <body> section:

<html>
   <body>
       <!-- content here -->
       <script src="/assets/preload-icons-bundle.js"></script>
       <script src="https://code.iconify.design/2/2.0.4/iconify.min.js"></script>
   </body>
</html>
Loading bundle before SVG framework in footer.

Example above shows method that is used by Iconify documentation website.

<html>
   <body>
       <!-- content here -->
       <script src="https://code.iconify.design/2/2.0.4/iconify.min.js"></script>
       <!-- DO NOT DO THIS! -->
       <script src="/assets/icons-bundle.js"></script>
   </body>
</html>
Loading bundle after SVG framework in footer.

The last example shows what you should not do. Why? Because scripts are loaded separately and part of DOM is ready. This means SVG framework can be loaded first and can start replacing icons, while bundle is still being loaded. SVG framework might send API queries for icons that exist in bundle, making bundle pointless.

Bundle before script

You can use this method regardless of how you include Iconify.

Global variable Iconify is not available until SVG framework is loaded, so how does this method work? By assigning data to a global variable IconifyPreload. When Iconify SVG framework is loading, it will check if global variable IconifyPreload exists and will load icon data from it.

Value can be a IconifyJSON object or an array of IconifyJSON objects.

Examples:

// Load few icons from Material Design Icons
var IconifyPreload = {
   prefix: 'mdi',
   icons: {
       account: {
           body:
               '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
       },
       home: {
           body:
               '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
       },
   },
   width: 24,
   height: 24,
};
Loading only one icon set.
var IconifyPreload = [
   // Load few icons from Material Design Icons
   {
       prefix: 'mdi',
       icons: {
           account: {
               body:
                   '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
           },
           home: {
               body:
                   '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
           },
       },
       width: 24,
       height: 24,
   },

   // Load few icons from Unicons
   {
       prefix: 'uil',
       icons: {
           home: {
               body:
                   '<path d="M21.66 10.25l-9-8a1 1 0 0 0-1.32 0l-9 8a1 1 0 0 0-.27 1.11A1 1 0 0 0 3 12h1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9h1a1 1 0 0 0 .93-.64a1 1 0 0 0-.27-1.11zM13 20h-2v-3a1 1 0 0 1 2 0zm5 0h-3v-3a3 3 0 0 0-6 0v3H6v-8h12zM5.63 10L12 4.34L18.37 10z" fill="currentColor"/>',
           },
           lock: {
               body:
                   '<path d="M17 9V7A5 5 0 0 0 7 7v2a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3zM9 7a3 3 0 0 1 6 0v2H9zm9 12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z" fill="currentColor"/>',
           },
       },
       width: 24,
       height: 24,
   },
];
Loading multiple icon sets.

Bundle after script

This method should only be used if you either:

  • Bundle SVG framework and icons in the same big JavaScript file.
  • Include both SVG framework and bundle in <head> section of HTML.

Loading icons after Iconify SVG framework has loaded is done by calling Iconify.addCollection. One function call per icon bundle.

Example:

// Load few icons from Material Design Icons
Iconify.addCollection({
   prefix: 'mdi',
   icons: {
       account: {
           body:
               '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
       },
       home: {
           body:
               '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
       },
   },
   width: 24,
   height: 24,
});

// Load few icons from Unicons
Iconify.addCollection({
   prefix: 'uil',
   icons: {
       home: {
           body:
               '<path d="M21.66 10.25l-9-8a1 1 0 0 0-1.32 0l-9 8a1 1 0 0 0-.27 1.11A1 1 0 0 0 3 12h1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9h1a1 1 0 0 0 .93-.64a1 1 0 0 0-.27-1.11zM13 20h-2v-3a1 1 0 0 1 2 0zm5 0h-3v-3a3 3 0 0 0-6 0v3H6v-8h12zM5.63 10L12 4.34L18.37 10z" fill="currentColor"/>',
       },
       lock: {
           body:
               '<path d="M17 9V7A5 5 0 0 0 7 7v2a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3zM9 7a3 3 0 0 1 6 0v2H9zm9 12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z" fill="currentColor"/>',
       },
   },
   width: 24,
   height: 24,
});

Both methods

Not sure if your bundle will be included before or after SVG framework?

You can wrap icon sets data in function that checks for Iconify.addCollection and appends icon data to IconifyPreload if Iconify.addCollection is missing.

// Use anonymous function to make sure add() is not added to global variables
(function () {
   // Function to add icons
   function add(data) {
       try {
           if (typeof self.Iconify === 'object' && self.Iconify.addCollection) {
               self.Iconify.addCollection(data);
               return;
           }
           if (typeof self.IconifyPreload === 'undefined') {
               self.IconifyPreload = [];
           }
           self.IconifyPreload.push(data);
       } catch (err) {}
   }

   // Wrap your data in add()

   // Load few icons from Material Design Icons
   add({
       prefix: 'mdi',
       icons: {
           account: {
               body: '<path d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4z" fill="currentColor"/>',
           },
           home: {
               body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
           },
       },
       width: 24,
       height: 24,
   });

   // Load few icons from Unicons
   add({
       prefix: 'uil',
       icons: {
           home: {
               body: '<path d="M21.66 10.25l-9-8a1 1 0 0 0-1.32 0l-9 8a1 1 0 0 0-.27 1.11A1 1 0 0 0 3 12h1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9h1a1 1 0 0 0 .93-.64a1 1 0 0 0-.27-1.11zM13 20h-2v-3a1 1 0 0 1 2 0zm5 0h-3v-3a3 3 0 0 0-6 0v3H6v-8h12zM5.63 10L12 4.34L18.37 10z" fill="currentColor"/>',
           },
           lock: {
               body: '<path d="M17 9V7A5 5 0 0 0 7 7v2a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-7a3 3 0 0 0-3-3zM9 7a3 3 0 0 1 6 0v2H9zm9 12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1z" fill="currentColor"/>',
           },
       },
       width: 24,
       height: 24,
   });

   // End of anonymous function and immediately call it
})();

How to automate build process?

Build process is simple:

  1. Get icon data.
  2. Wrap it in a callback.
  3. Optional: bundle it with SVG framework.

See examples for scripts you can use.