Svelte 离线使用iconify 的某个icon sets

按照iconify 的官方Get started 

npm install @iconify/svelte --save-dev

可以直接使用icon

import Icon from '@iconify/svelete'

<Icon icon="lucide:airplay"/>

但是这样是通过官方提供的api 加载icon 的metadata到浏览器后存储到本地的

如果是在离线环境下，这种就无法加载icon

官方提供了一些方法实现离线加载

1. 通过自建icon 库的方式，提供类似官方api的icon 服务

2. 加载icon sets的方式

我是采用了第二种办法

例如我需要lucide 的icon sets

npm install @iconify-json/lucide --save-dev

将lucide 的icon json 安装到node_modules

然后在svelte项目的入口文件，比如 sveltekit routes下的 +layout.svelte 中 

  import { addCollection } from '@iconify/svelte';

  import { icons } from '@iconify-json/lucide';

  addCollection(icons);

通过addCollection 添加icons即可，将会打包到项目中