Iconify for Vue offline use

Retrieving icon data from Iconify API requires visitor to be online. What if you want to use component offline or on local network?

There are several options:

  • You can build icon bundles for icons that are used in your application, making icon data available offline.
  • You can use icon packages, which is similar to icon bundles, but import icons one by one and are easier to use.

See icon bundles for Iconify for Vue documentation.

Offline component

Additionally, if you do not want to include API functionality, you can import component without API support. It is a bit smaller than full component.

In your code replace:

import { Icon } from '@iconify/vue2';

with

import { Icon } from '@iconify/vue2/dist/offline';

Offline component has only the following functions available:

<template>
   <div>
       <p>Icon referenced by name: <Icon icon="bell" :inline="true" /></p>
       <p>Icon referenced by object: <Icon :icon="bellIcon" :inline="true" /></p>
   </div>
</template>

<script>

import { Icon, addIcon } from '@iconify/vue2/dist/offline';
import bellFill from '@iconify-icons/bi/bell-fill';

// Assign icon data to name "bell" used in first example
addIcon('bell', bellFill);

export default {
   components: {
       Icon,
   },
   data() {
       return {
           // Assign icon data to variable "bellIcon" used in second example
           bellIcon: bellFill,
       };
   },
};
</script>

Available icons

All icon sets available with Iconify API are available as standalone icon packages. There are over 100,000 icons from more than 100 icon sets.

If you want to use icon packages, as shown in example above, see icon packages documentation for more information.

Icon packages

Example above imports icon from package @iconify-icons/bi, which is a ES module.

If you are experiencing errors using packages from @iconify-icons, there are CommonJS packages with exactly the same data. To switch to CommonJS package, instead of @iconify-icons/bi use @iconify/icons-bi, so import line looks like this:

import bellFill from '@iconify/icons-bi/bell-fill';

Format for icon data packages:

  • ES package: @iconify-icons/{prefix}
  • CommonJS package: @iconify/icons-{prefix}

where "{prefix}" is icon set prefix. Use ES package whenever possible, switch to CommonJS package if your bundler does not support ES modules or if you need to use it in Node.js.

See icon packages documentation.