Iconify for Vue
Iconify 为多个流行的 UI 框架提供了原生图标组件。
Iconify for Vue 就是其中之一。
又一个图标组件？与其他图标组件相比有什么优势？
- 一种语法即可使用来自 80 多个图标集的 275,000 多个图标。
- 渲染 SVG。许多组件仅渲染图标字体，效果往往不佳。Iconify 仅使用像素级精确的 SVG。
- 按需加载图标。无需将图标打包，组件会自动从 Iconify API 加载你使用的图标数据。
请注意，此组件并非专为服务端渲染设计。 如果您正在使用 SSR，请考虑切换到 Iconify Icon Web 组件。
安装
如果您使用 NPM：
npm install --save-dev @iconify/vue如果您使用 Yarn：
yarn add --dev @iconify/vue使用方法
安装 @iconify/vue 并从中导入组件（该组件以命名导出形式提供）：
import { Icon } from "@iconify/vue";然后在模板中使用 Icon 组件，并将图标名称作为 icon 参数传入：
<Icon icon="mdi-light:home" />Nuxt.js
该组件与 Nuxt.js 兼容。
该组件在挂载前不会获取图标数据。 对于服务端渲染而言，这意味着生成的 HTML 将不包含 SVG， 图标仅在水合（hydration）完成后于客户端渲染。
如果您确实希望在服务端渲染 SVG， 请提供 图标数据 作为参数，而非图标名称， 或 使用其他图标组件。
SSR 属性
在 4.1.2 版本中新增了一个布尔属性：ssr。
启用后，它将立即渲染图标：
<Icon icon="mdi:home" :ssr="true" />
在非 SSR 环境下使用也是安全的，因为不存在水合中断的问题。
如果您正在使用 SSR（例如 Nuxt），请确保图标数据在服务端和客户端均可用。
属性
您可以向组件传递任意自定义属性。
必需属性：
- icon，IconifyIcon|string 图标名称或图标数据。
可选属性：
- inline，boolean 更改垂直对齐方式。
- width，string|number 图标宽度。
- height，string|number 图标高度。
- horizontalFlip，boolean 水平翻转图标。
- verticalFlip，boolean 垂直翻转图标。
- flip，string horizontalFlip 和 verticalFlip 的替代方案。
- 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 Vue 中更改图标颜色。
尺寸
默认情况下，图标高度设置为 "1em"，图标宽度会根据图标的宽高比动态调整。这使得只需在样式表中更改 font-size 即可轻松调整图标大小，就像使用图标字体一样。
有几种方法可以更改图标尺寸：
- 在样式中设置 font-size（如果使用内联样式，则使用 fontSize）。
- 设置 width 和/或 height 属性。
width 和 height 的值可以是数字或字符串。
如果仅设置一个维度，另一个维度将根据图标的宽高比自动计算。例如，如果图标尺寸为 16 x 24，将高度设置为 48 时，宽度将自动设置为 32。该计算不仅适用于数字，也适用于字符串值。
<Icon icon="mdi:home" style="font-size: 24px;" />
有关更改图标尺寸的各种方法，请参阅 如何在 Iconify for Vue 中更改图标尺寸。
变换
图标可以进行旋转，以及水平翻转和/或垂直翻转。所有变换均相对于图标中心进行。
这些不是 CSS 变换，变换是在 SVG 内部应用的。
更多详情请参阅 如何在 Iconify for Vue 中变换图标。
加载事件
当图标数据加载完成时，会触发 load 事件。
当触发 load 时：
- 如果 icon 属性的值为对象，则不会触发 load。
- 如果 icon 属性的值为字符串且图标数据可用，则仅在首次渲染时触发 load。
- 如果 icon 属性的值为字符串且图标数据不可用，则在从 API 获取图标数据后的首次重新渲染时触发 load。
load 事件的目的是什么？是为了让您知道 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。