Appearance

将图标集导出为 JSON 包 ​

本教程属于 Iconify Tools 中的 导出函数文档 的一部分。

函数 exportJSONPackage() 会在指定目录中创建一个图标包。

这些包用于加载整个图标集，示例如下：

jsimport { addCollection, Icon } from '@iconify/react';
import { icons as mdiLightIcons } from '@iconify-json/mdi-light';
import { icons as tablerIcons } from '@iconify-json/tabler';

addCollection(mdiLightIcons);
addCollection(tablerIcons);

// 演示使用部分已导入的图标
export function renderHomeIcon() {
   return <Icon icon="mdi-light:home" />;
}

export function renderAlertIcon() {
   return <Icon icon="tabler:alert-octagon" />;
}

@iconify-json/mdi-light 和 @iconify-json/tabler 是由该函数生成的包，即上述示例中使用的包。

有关详细信息，请参阅 独立图标集包文档。

用法 ​

该函数具有以下参数：

  • iconSet，IconSet。要导出的图标集。
  • options，object。选项。见下文。

函数返回生成的文件数组。

该函数是异步的。这意味着你需要将其作为 Promise 实例进行处理，通常是在函数调用前添加 await。

选项 ​

选项对象包含以下必需属性：

  • target，string。目标目录。如果目录不存在，将会被创建。

以及以下可选属性：

  • cleanup，boolean。如果为 true，则在导出图标前会清空目标目录。默认为 false。
  • package，object。package.json 的属性。使用此项至少设置包名称和版本。
  • customFiles，Record<string,unknown>。要导出的自定义文件。键为文件名，值为内容。见下文。

customFiles ​

customFiles 选项包含你想要添加到包中的其他文件。键为文件名，值可以是以下类型之一：

  • string。文件内容。
  • object。将在写入文件前被序列化的 JSON 内容。
  • null。如果值为 null，则删除该文件。

示例 ​

example.ts
tsimport { exportJSONPackage, IconSet/* , execAsync */ } from '@iconify/tools';

// Import icon set
const iconSet = new IconSet({
   prefix: 'carbon',
   icons: {
       'add': {
           body: '<path d="M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z" fill="currentColor"/>',
       },
       'arrow-down-regular': {
           body: '<path d="M24.59 16.59L17 24.17V4h-2v20.17l-7.59-7.58L6 18l10 10l10-10l-1.41-1.41z" fill="currentColor"/>',
       },
       'arrow-left-regular': {
           body: '<path d="M14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16l10 10z" fill="currentColor"/>',
       },
       'back-to-top-regular': {
           body: '<path d="M16 14L6 24l1.4 1.4l8.6-8.6l8.6 8.6L26 24z" fill="currentColor"/><path d="M4 8h24v2H4z" fill="currentColor"/>',
       },
       'bookmark-filled': {
           body: '<path d="M24 2H8a2 2 0 0 0-2 2v26l10-5.054L26 30V4a2 2 0 0 0-2-2z" fill="currentColor"/>',
       },
       'caret-down-regular': {
           body: '<path d="M24 12l-8 10l-8-10z" fill="currentColor"/>',
       },
       'caret-left-regular': {
           body: '<path d="M20 24l-10-8l10-8z" fill="currentColor"/>',
       },
   },
   aliases: {
       'add-regular': {
           parent: 'add',
       },
       'arrow-up-regular': {
           parent: 'arrow-down-regular',
           vFlip: true,
       },
       'arrow-right-regular': {
           parent: 'arrow-left-regular',
           hFlip: true,
       },
       'caret-up-regular': {
           parent: 'caret-down-regular',
           vFlip: true,
       },
       'caret-right-regular': {
           parent: 'caret-left-regular',
           hFlip: true,
       },
   },
   width: 32,
   height: 32,
});

(async () => {
   // Target directory
   const target = `output/${iconSet.prefix}`;

   // Export package
   await exportJSONPackage(iconSet, {
       target,
       package: {
           name: `@iconify-json/${iconSet.prefix}`,
           version: '1.0.0',
           bugs: 'https://github.com/iconify/iconify/issues',
           homepage: 'https://github.com/iconify/iconify',
       },
       cleanup: true,
       /*
       customFiles: {
           'README.md': 'README!',
       },
       */
   });

   // Publish NPM package
   /*
   await execAsync('npm publish --access=public --silent', {
       cwd: target,
   });
   */
})();