Icons

AnyUI has been integrated with @iconify/vue, it’s recommended to use iconify for all the icon usage.

Offline usage

In some scenarios you might need to use AnyUI in a completely offline environment, icons will be loaded from online API by default with iconify, in order to meet the needs of completely offline environment, we provide an additional helper to help you achieve the offlineization of all the icons you need.

For the pre-defined default icons, you can install an additional package named @any-design/default-icons, it will load all the default icons as IconMeta JSON format, then you can setup them with the Icon Helper directly at startup.

import { setupIcons } from '@any-design/anyui/vue';
import DefaultIcons from '@any-design/default-icons',

setupIcons({
  icons: DefaultIcons,
});

For other icons, you can check https://iconify.design/docs/icons/icon-data.html to learn how to install and import other icons.

Then you can use the setupIcons helper for initialization. We also support initializing an entire icon collection, so you can also choose to use an entire icon collection offline.

Prefetch

The setupIcons method also provides the ability to prefetch icons, you can set a name list to prefetch property in IconSetupOptions.

Other settings

For other settings that the helper method have not supported yet, you can directly import @iconify/vue and its APIs to achieve your goal.

图标

AnyUI 已经集成 @iconify/vue，推荐所有图标都通过 Iconify 使用。

离线使用

在完全离线的环境中，默认从在线 API 加载图标的方式可能不适用。AnyUI 提供了额外的初始化 helper，方便你把所需图标离线化。

对于组件内置的默认图标，可以安装 @any-design/default-icons。它会以 IconMeta JSON 格式提供所有默认图标，然后在启动时交给 Icon Helper：

import { setupIcons } from '@any-design/anyui/vue';
import DefaultIcons from '@any-design/default-icons',

setupIcons({
  icons: DefaultIcons,
});

如果需要其他图标，可以参考 https://iconify.design/docs/icons/icon-data.html 学习如何安装并导入图标数据。

之后同样可以通过 setupIcons 完成初始化。它也支持一次性初始化整个图标集合，因此你可以按项目需要选择完整离线某个 collection。

预取

setupIcons 方法还支持预取图标。你可以在 IconSetupOptions 的 prefetch 字段里传入图标名称列表。

其他设置

如果 helper 暂时没有覆盖某些高级设置，可以直接导入 @iconify/vue 及其 API 来完成。