Generating icon bundles with API

This tutorial is a part of Iconify icon bundles tutorial.

You can use Iconify API to generate data for icon bundles. Icon bundles use the same IconifyJSON format that is used to retrieve icon data from API.

This method can be used to generate small bundles, where you do not need to automate anything. If you want to automate bundle generation, for example, make it a part of your build process, you should use Iconify JSON Tools instead.

Retrieving icon data

To get icons data, all you need to do is query Iconify API.

End point is https://api.iconify.design/{prefix}.json?icons={icons}, where "{prefix}" is icon set prefix, "{icons}" is comma separated list of icon names.

You can add &pretty=1 to URL to generate pretty markup.

Example: https://api.iconify.design/mdi.json?icons=account-box,account-cash,account,home&pretty=1

{
   "prefix": "mdi",
   "icons": {
       "account-box": {
           "body": "<path d=\"M6 17c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6m9-9a3 3 0 0 1-3 3a3 3 0 0 1-3-3a3 3 0 0 1 3-3a3 3 0 0 1 3 3M3 5v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z\" fill=\"currentColor\"/>"
       },
       "account-cash": {
           "body": "<path d=\"M11 8c0 2.21-1.79 4-4 4s-4-1.79-4-4s1.79-4 4-4s4 1.79 4 4m0 6.72V20H0v-2c0-2.21 3.13-4 7-4c1.5 0 2.87.27 4 .72M24 20H13V3h11v17m-8-8.5a2.5 2.5 0 0 1 5 0a2.5 2.5 0 0 1-5 0M22 7a2 2 0 0 1-2-2h-3c0 1.11-.89 2-2 2v9a2 2 0 0 1 2 2h3c0-1.1.9-2 2-2V7z\" fill=\"currentColor\"/>"
       },
       "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
}

Copy contents to clipboard, paste it in your bundle file, wrapped in callback.

Wrapping in a callback

API can wrap data in a callback, skipping second step in bundle creation process.

Name of callback varies, see icon bundles tutorial for details.

To wrap data in a callback, you need to:

  1. Change .json? to .js? in URL.
  2. Add &callback={callback} to URL, where "{callback}" is a callback name.

Example, using Iconify.addCollection for a callback that is used in SVG framework:

https://api.iconify.design/uil.js?icons=home,lock,lock-open-alt&pretty=1&callback=Iconify.addCollection

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\"/>"
       },
       "lock-open-alt": {
           "body": "<path d=\"M12 13a1.49 1.49 0 0 0-1 2.61V17a1 1 0 0 0 2 0v-1.39A1.49 1.49 0 0 0 12 13zm5-4H9V7a3 3 0 0 1 5.12-2.13a3.08 3.08 0 0 1 .78 1.38a1 1 0 1 0 1.94-.5a5.09 5.09 0 0 0-1.31-2.29A5 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-3zm1 10a1 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
});

Importing component

If you are using a component, you need to add import statement at start of file.

API doesn't do that, it only wraps data. You need to add appropriate import statement yourself, then add generated file to your scripts, so it could be bundled with everything else.

import { addCollection } from '@iconify/react';
// import { addCollection } from '@iconify/vue';
// import { addCollection } from '@iconify/vue2';
// import { addCollection } from '@iconify/svelte';