Appearance

拆分图标包 ​

Split icon packages are deprecated.

It creates unnecessary duplication, adding 2 extra NPM packages per icon set. Please use JSON packages, which include all icons in one file.

Old packages are still available, but no longer updated.

To extract data for each icon from JSON file, you can use parseIconSet() from Iconify Utils.

You can also generate split packages yourself using exportIconPackage() from Iconify Tools.

为了方便开发者，完整图标集包 也提供了更小的拆分版本。

本文档适用于包含多个文件（每个图标一个文件）的包。如果你只需要导入少量图标，而无需解析整个图标集，可以使用这些包。

请注意，某些包可能包含大量文件，部分文件系统可能无法处理。

包 ​

NPM 上提供两种版本的包：

  • @iconify-icons/{prefix}：包含 ES 模块格式的数据，适用于现代开发。
  • @iconify/icons-{prefix}：包含 CommonJS 格式的图标数据，适用于旧版代码。

将 "{prefix}" 替换为图标集的前缀。

每当大型图标集包更新时，这些包都会自动生成。

内容 ​

每个包包含一个图标集，每个图标都有独立的文件（"{name}" 为图标名称）：

  • {name}.js：以默认导出形式提供 IconifyIcon 格式的图标数据。
  • {name}.d.ts：包含类型定义。

IconifyIcon 格式的图标数据如下所示：

json{
 "body": "<path d=\"M15 20a1 1 0 0 0-1-1h-1v-2h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4v2h-1a1 1 0 0 0-1 1H2v2h7a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1h7v-2h-7m-8-5V5h10v10H7z\" fill=\"currentColor\"/>",
 "width": 24,
 "height": 24
}

你可以通过文件的默认导入来导入任意图标的数据，如下所示：

jsimport mdiHome from '@iconify-icons/mdi/home';

使用此类包中图标的 React 组件示例：

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>
   );
}

CommonJS 包 ​

对于较旧的软件，请使用 CommonJS 包。将 import 替换为 require()：

jsconst mdiHome = require('@iconify/icons-mdi/home');

创建包 ​

如果你想为自己的图标集创建包，请参阅 Iconify Tools 中的 exportIconPackage()。

图标集列表 ​

如果你需要获取可用的开源图标集列表，请参阅图标集列表包。