Iconify 适用于 React
Iconify 为多个流行的 UI 框架提供了原生图标组件。
Iconify for React 就是其中之一。
又一个图标组件？与其他图标组件相比有什么优势？
- 一种语法即可使用来自 80 多个图标集的 275,000 多个图标。
- 渲染 SVG。许多组件仅渲染图标字体，效果往往不佳。Iconify 仅使用像素级精确的 SVG。
- 按需加载图标。无需将图标打包，组件会自动从 Iconify API 加载你使用的图标数据。
安装
如果您使用 NPM：
npm install --save-dev @iconify/react如果您使用 Yarn：
yarn add --dev @iconify/react版本 4
从版本 5 开始，该组件是一个使用 React hooks 的现代函数式组件。
如果您想在较旧版本的 React 中使用该图标组件， 您可以使用 @legacy 标签安装版本 4：
npm install --save-dev @iconify/react@legacy使用方法
安装 @iconify/react 并从中导入 Icon 组件：
import { Icon } from "@iconify/react";然后将图标名称作为 icon 参数传递给 Icon 组件：
<Icon icon="mdi-light:home" />组件将自动从 Iconify API 获取 的数据并进行渲染。Iconify API 上提供了超过 275,000 个图标，涵盖各种免费和开源的图标集，包括所有最受欢迎的图标集。
Iconify API 的可用性是使 Iconify 组件区别于其他替代方案的最大特性。
API 按需发送图标数据。按需加载图标相比其他方法具有巨大优势：
- 图标数量可以是无限的，为您提供更多选择。您未使用的图标不会被加载。
- 没有无用数据。图标集通常包含数千个图标。组件不会打包所有图标，而是仅检索您使用的图标。
Next.js
该组件与最新版的 Next.js 兼容。
遗憾的是，Next.js 目前不支持在组件中使用 useState， 导致无法在服务器端和客户端使用相同的有状态组件， 因此该图标组件仅为客户端组件。 SVG 不会在服务器端渲染。
此外，为了避免水合错误，组件仅在挂载后才会渲染 SVG， 这有时会导致微小的延迟。 如果您正在使用 Next.js 或类似框架， 建议考虑切换到 Iconify Icon Web 组件。
如果您确实希望无延迟地渲染 SVG， 请提供 图标数据 作为参数，而不是图标名称， 或使用其他方式渲染图标，例如：
属性
您可以向 Icon 传递任何自定义属性。
必需属性：
- icon，IconifyIcon|string 图标名称或图标数据。
可选属性：
- inline，boolean 更改垂直对齐方式。
- width，string|number 图标宽度。
- height，string|number 图标高度。
- hFlip，boolean 水平翻转图标。
- vFlip，boolean 垂直翻转图标。
- flip，string hFlip 和 vFlip 的替代方案。
- rotate，number|string 旋转图标。
- color，string 更改图标颜色。
- onLoad，function 当图标数据加载完成时调用的回调函数。请参阅下文。
有关每个可选属性的更多信息，请参见下文。
除了上述属性外，该图标组件还接受任何其他属性和事件。所有其他属性和事件都将传递给生成的 SVG 元素，因此您可以执行诸如分配 onClick 事件、设置内联样式、添加标题等操作。
图标
图标名称是一个字符串，包含 3 个部分：
有效图标名称示例：
- - 图标为来自公共 Iconify API 的 Flat Color Icons 图标集中的 "voice-presentation"。
- - 图标为来自公共 Iconify API 的 Material Design Light 图标集中的 "home"。
例外情况：
- 如果 API 提供商为空，则可以省略（如上述示例所示）。
- 如果前缀不包含 "-"，则前缀和图标名称可以用连字符分隔。这是为了支持从图标字体迁移的用户。例如， 和 是相同的，因为 "fa" 不包含连字符。
目前有超过 275,000 个图标，来自 80 多个图标集。浏览图标集 查看所有可用图标。
您还可以添加自定义 API 提供商以获取更多图标选择。请参阅 API 提供商文档。
颜色
您只能更改单色图标的颜色。某些图标（例如表情符号）的调色板是硬编码的，无法更改。
若要为单色图标添加颜色，只需更改文本颜色即可。
<Icon icon="mdi:home" style={{ color: "red" }} />有关设置颜色的各种方法，请参阅 如何在 Iconify for React 中更改图标颜色。
尺寸
默认情况下，图标高度设置为 "1em"，图标宽度会根据图标的宽高比动态调整。这使得只需在样式表中更改 font-size 即可轻松调整图标大小，就像使用图标字体一样。
有几种方法可以更改图标尺寸：
- 在样式中设置 font-size（如果使用内联样式，则使用 fontSize）。
- 设置 width 和/或 height 属性。
width 和 height 的值可以是数字或字符串。
如果仅设置一个维度，另一个维度将根据图标的宽高比自动计算。例如，如果图标尺寸为 16 x 24，将高度设置为 48 时，宽度将自动设置为 32。该计算不仅适用于数字，也适用于字符串值。
<Icon icon="mdi:home" style={{ fontSize: "24px" }} />有关更改图标尺寸的各种方法，请参阅 如何在 Iconify for React 中更改图标尺寸。
变换
图标可以进行旋转，以及水平翻转和/或垂直翻转。所有变换均相对于图标中心进行。
这些不是 CSS 变换，变换是在 SVG 内部应用的。
有关更多详细信息，请参阅 如何在 Iconify for React 中变换图标。
onLoad
onLoad 属性是一个可选的回调函数。当图标数据加载完成时调用。
它并非事件（例如链接的 click 事件），而是一个简单的回调函数。
当 onLoad 被调用时：
- 如果 icon 属性的值是一个对象，则不会调用 onLoad。
- 如果 icon 属性的值是一个字符串且图标数据可用，则会在首次渲染时调用 onLoad。
- 如果 icon 属性的值是一个字符串且图标数据不可用，则会在从 API 获取图标数据后的首次重新渲染时调用 onLoad。
onLoad 的作用是什么？用于让您知道 Icon 组件何时渲染了图标，以及何时未渲染任何内容。这使您可以执行诸如为父元素添加类名（例如 "container--with-icon"）之类的操作，以便在显示图标时修改布局。
函数
该组件导出了多种函数，开发者可使用它们来控制图标。
函数分为多个组（点击函数名称可查看更多详情和示例）：
检查可用图标
本节包含以下几个函数：
- iconLoaded(name)。检查图标数据是否可用，返回 boolean。
- listIcons()。列出可用图标，返回 string[]。
- getIcon(name)。返回图标数据，返回 IconifyIcon 对象。
添加图标
用于向组件添加图标的函数：
- addIcon()。添加单个图标。
- addCollection()。添加图标集。
注意：通过这些函数添加到组件的图标不会存储在图标数据缓存中。组件仅缓存从 API 获取的图标。
自定义加载器
可以使用自定义加载器从自定义源加载图标：
- setCustomIconLoader()。加载单个图标。
- setCustomIconsLoader()。批量加载图标。
加载器按图标集前缀进行设置。请确保在显示任何图标之前配置好加载器。
它也可用于自定义图标：在自定义加载器中，你可以使用 loadIcon 从 API 加载图标，更改其内容（例如颜色或描边宽度），然后返回修改后的图标。
辅助函数
- replaceIDs(html)。随机化生成字符串中的 ID。在基于 getIcon() 返回的数据渲染图标时应使用此函数，以确保每个图标内部的元素都具有唯一的 ID。
- calculateSize()。计算图标尺寸。当仅设置了 height 时用于计算 width，反之亦然。
- buildIcon(icon, customisations?)。生成图标组件所需的数据。如果您倾向于自行生成 <svg>，可以使用此函数。数据包含 <svg> 的属性以及内部 HTML。
API 函数
- loadIcons(icons, callback?)。从 API 加载图标，在全部或部分图标加载完成后调用可选的回调函数。
- loadIcon(icon)。从 API 加载单个图标，返回 Promise。
- addAPIProvider()。添加自定义 API 提供程序。请参阅 API 提供程序文档。
内部 API 函数
公开了若干内部 API 函数。它们旨在供需要对组件进行更多控制的开发人员使用。例如，它们被用于 Sketch 和 Figma 插件中。请谨慎使用。
所有内部 API 函数均作为 _api 对象的属性对外公开：
- getAPI()。返回内部 API 模块。
- getAPIConfig()。返回 API 配置。
- setAPIModule(provider)。为提供程序设置 API 模块。这是一个实验性功能，旨在供使用自定义模块从 API 检索数据的自定义 API 提供程序使用。
- setFetch(fetch)。设置自定义 Fetch API。
- getFetch()。返回已使用的 fetch() 函数，若 Fetch API 不可用则返回 null。