Appearance

将图标集导出为图标包 ​

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

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

这些包用于离线图标组件，例如：

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

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

// Test component
export function iconDemo() {
   return (
       <div>
           <div>
               Icon referenced by name: <Icon icon="bell" />
           </div>
           <div>
               Icon referenced by object: <Icon icon={bellFill} />
           </div>
       </div>
   );
}

@iconify-icons/bi 就是由该函数生成的包，用于上述示例中。

有关详细信息，请参阅 拆分图标包文档。

弃用通知 ​

此函数已被弃用，但仍为依赖它的开发者提供维护。

在 Iconify 项目的早期阶段，需要单个图标包。 在现代 Node 生态系统中，这已不再需要。 可以使用 Vite 等工具按需生成内容，包括单文件包。 像 Unplugin Icons 这样的包可以动态生成图标组件。

不再需要单个图标包，应避免使用。 如果您需要提取少量图标的数据， 请在应用的构建过程中通过自定义脚本或 Vite 插件来完成。

用法 ​

该函数具有以下参数：

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

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

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

选项 ​

options 对象具有以下必需属性：

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

以及以下可选属性：

  • cleanup，boolean。如果为 true，则在导出图标前会清空目标目录。默认为 false。
  • package，object。package.json 的属性。使用它至少设置包名称和版本。
  • module，boolean。如果为 true，函数将生成包含 ES 模块的包；如果为 false，函数将生成包含 CommonJS 模块的包。默认为 true。
  • typesContent，string。.d.ts 文件的自定义内容。
  • customFiles，Record<string,unknown>。要导出的自定义文件。键为文件名，值为内容。见下文。

customFiles ​

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

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

示例 ​

example.ts
tsimport { exportIconPackage, 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 exportIconPackage(iconSet, {
       target,
       module: true,
       package: {
           name: `@iconify-icons/${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,
   });
   */
})();