Iconify for React 函数：getIcon

本教程属于 Iconify for React 函数教程 的一部分。

函数 getIcon() 用于获取图标数据。

用法

该函数包含以下参数：

• name，string。图标名称。

该函数以 IconifyIcon 格式返回图标数据，如果图标不可用则返回 null。

示例

jsimport { getIcon } from '@iconify/react';

const data = getIcon('bi:check2-circle');

Result:

json{
   "body": "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z\"/><path fill-rule=\"evenodd\" d=\"M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0a6.5 6.5 0 1 1-3.25-5.63a.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z\"/></g>",
   "left": 0,
   "top": 0,
   "width": 16,
   "height": 16,
   "rotate": 0,
   "vFlip": false,
   "hFlip": false
}

另一个示例：

jsimport { getIcon } from '@iconify/react';

const data = getIcon('cil:paper-plane');

Result:

json{
   "body": "<path fill=\"currentColor\" d=\"M474.444 19.857a20.336 20.336 0 0 0-21.592-2.781L33.737 213.8v38.066l176.037 70.414L322.69 496h38.074l120.3-455.4a20.342 20.342 0 0 0-6.62-20.743zM337.257 459.693L240.2 310.37l149.353-163.582l-23.631-21.576L215.4 290.069L70.257 232.012L443.7 56.72z\"/>",
   "left": 0,
   "top": 0,
   "width": 512,
   "height": 512,
   "rotate": 0,
   "vFlip": false,
   "hFlip": false
}

图标名称无效时的示例，返回 null：

jsimport { getIcon } from '@iconify/react';

// null
const data = getIcon('no-such-icon');