Iconify for Svelte 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?
- You can host your own Iconify API.
- You can build icon bundles for icons that are used in your application, making icon data available offline.
- You can use individual icon packages, which is similar to icon bundles, but import icons one by one and are easier to use.
If you do not want to use API, you need to provide icon component with data for all icons you are using.
See icon bundles for Iconify for Svelte 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 future versions offline bundle might be removed. It was created early in project development, when there were no alternative ways to use icons. Currently there are many ways to use icons in SVG and CSS without using Iconify API, so this offline bundle is no longer needed.
In your code replace:
import Icon from '@iconify/svelte';
with
import Icon from '@iconify/svelte/dist/OfflineIcon.svelte';
or, if you want to link to compiled component instead of .svelte file, use
import Icon from '@iconify/svelte/dist/offline';
Offline component has only the following functions available:
- addIcon(). Adds one icon.
- addCollection(). Adds an icon set.
<script>
import Icon, { addIcon } from '@iconify/svelte/dist/OfflineIcon.svelte';
// import Icon, { addIcon } from '@iconify/svelte/dist/offline';
import bellFill from '@iconify-icons/bi/bell-fill';
// Assign icon data to name "bell" used in first example
addIcon('bell', bellFill);
</script>
<div>
<div>
Icon referenced by name: <Icon icon="bell" inline={true} />
</div>
<div>
Icon referenced by object: <Icon icon={bellFill} inline={true} />
</div>
</div>Do not mix "@iconify/svelte" and "@iconify/svelte/dist/OfflineIcon.svelte" in the same project! These are separate bundles.
Available icons
All icon sets available with Iconify API are available as standalone icon packages. There are over 150,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.