SVG framework function: addCollection

This tutorial is part of Iconify SVG Framework functions tutorial.

Function addCollection() adds an icon set to SVG framework's icon storage.

Usage

The function has the following parameters:

• data, IconifyJSON. Icon set data.
• provider, string. Optional API provider ID.

The function returns boolean value: true on success, false if something is wrong with data.

If an icon set has provider property and second parameter to addCollection() is passed, provider from second parameter overrides provider from an icon set.

Examples

jsIconify.addCollection({
   prefix: 'custom',
   icons: {
       icon1: {
           body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
       },
   },
   width: 24,
   height: 24,
});

Another example:

jsIconify.addCollection({
   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,
});

Notes

• Icons added by this function are not cached in localStorage and sessionStorage.
• Calling this function will trigger re-scan of DOM on the next tick.

API provider

API provider parameter can be used to specify that icon set belongs to the specific API provider.

It can also be used to load custom icons asynchronously without triggering API queries. Each API provider has its own API endpoint, so if you are using custom API provider that component doesn't have configuration for (currently by default component has no API providers configured), the component will not attempt to load missing icons from an unknown API provider.

Example:

jsIconify.addCollection(
   {
       prefix: 'md',
       icons: {
           test: {
               body: '<path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"/>',
           },
       },
       width: 24,
       height: 24,
   },
   'custom'
);

Code above adds only one icon:

• provider is "custom".
• prefix is "md".
• name is "test".

In HTML code this icon can be used like this:

html<span class="iconify" data-icon="@custom:md:test"></span>

Syntax is similar to default icon syntax, but with API provider "@custom" in icon name. See API providers documentation for details.

One icon

This function adds an entire icon set in IconifyJSON format.

If you want to add only once icon, and you have IconifyIcon data, use function addIcon() instead.