Appearance

Iconify Updates 2020 ​

SVG 框架 2.0.0 发布候选版 1 26 Aug ​

基于 Iconify 2 框架的多个软件包已更新：

  • Iconify SVG 框架：2.0.0 发布候选版 1
  • 支持 API 的 Iconify for React：1.0.0 发布候选版 1
  • 新组件：Iconify for Vue 3

此外，Iconify 文档已重写，其中最重要的部分已完成。

如需了解更多关于 SVG 框架及组件新版本的信息，请访问 SVG 框架 2.0 文档 以及 Iconify 组件文档。

新文档已上线 24 Jul ​

新文档已上线！点击此处访问新文档。

旧文档严重过时且几乎无法使用。新文档的构建旨在便于编辑和更新。

与旧文档主要侧重于 SVG 框架不同，新文档涵盖了所有主题。新主题可以轻松添加。 所有文档均使用 Markdown 编写，并辅以少量自定义语法。 内容涵盖各类组件、Iconify API、开发者文档、图标转换教程以及众多其他主题。

文档的许多部分仍在建设中。不过，其包含的信息量已远超旧文档。文档几乎每天都在更新。

新文档已托管至 Iconify GitHub 仓库。构建文档的说明位于 README.md 文件中。欢迎任何人参与贡献。

Iconify 2 更新 2 Jul ​

基于 Iconify 2 框架的多个软件包已更新：

  • Iconify SVG 框架：2.0.0 beta 2
  • Iconify for Vue：1.0.2
  • Iconify for Svelte：1.0.0 beta 4
  • Iconify for React：2.0.0 beta 2
  • Iconify for React with API：1.0.0 beta 2

点击此处访问新代码。

本网站的文档正在重建中。目前文档适用于 Iconify 1.0。Iconify 2.0 并非完全向后兼容，因此您应前往 GitHub 查看文档。如有任何疑问，请在 Iconify GitHub 仓库中提交 Issue。

Iconify for React with API ​

Iconify for React with API 是一个全新的包。它与 Iconify for React 类似，但增加了对 Iconify API 的支持。

在使用 Iconify for React 时，您必须打包所使用的图标并将图标数据传递给组件。新组件除了支持数据语法外，还支持通过名称引用图标。组件将自动从 Iconify API 获取图标数据并进行渲染。组件会将获取的数据缓存在本地存储中，因此页面重新加载后无需再次获取图标数据。

使用 Iconify for React with API 的复选框组件示例：

jsximport React from 'react';
import { Icon, loadIcons } from '@iconify/react-with-api';

// 可选：在开始前加载这两个图标。
// 这样做将：
// 1. 将图标请求合并为一个，减少 HTTPS 查询次数。
// 2. 在图标显示前预加载，提升渲染性能。
loadIcons(['uil:check-circle', 'uil:circle']);

// 组件
export class Checkbox extends React.Component {
   constructor(props) {
       super();
       this.state = {
           checked: props.checked,
       };
       this._check = this._check.bind(this);
   }

   render() {
       const checked = this.state.checked;
       const icon = checked ? 'uil:check-circle' : 'uil:circle';
       const className =
           'checkbox checkbox--' + (checked ? 'checked' : 'unchecked');

       return (
           <div className="checkbox-container">
               <a href="# " className={className} onClick={this._check}>
                   <Icon icon={icon} />
                   {this.props.text}
               </a>
               <small>{this.props.hint}</small>
           </div>
       );
   }

   _check(event) {
       event.preventDefault();
       this.setState({
           checked: !this.state.checked,
       });
   }
}

Iconify 版本 1.0.7 24 Jun ​

Iconify 版本 1.0.7 已发布。

此版本为 SVG 框架提供了一个新的打包文件，其中不包含对 Iconify API 的支持。

要在不使用 Iconify API 支持的情况下使用 Iconify SVG 框架，请引入 iconify.without-api.min.js 而不是 iconify.min.js。

不包含 Iconify API 支持的 Iconify SVG 框架仅适用于已打包的图标。这意味着，如果你已将所需的所有图标添加到一个打包文件中，就可以离线使用它。

目前正在开发中的 Iconify 2.0 也将包含一个类似的不带 API 支持的打包文件。

Iconify 2.0 beta 版、Vue 和 Svelte 30 Apr ​

Iconify 2.0 beta 版、Iconify for Vue、Iconify for Svelte。

经过数月的辛勤工作，Iconify 2.0 已进入 beta 测试阶段！ 它也被用作全新 Vue 和 Svelte 组件以及重写版 React 组件的基础。

Iconify 1.0 最初是作为概念验证而设计的。它的构建旨在证明图标字体完全可以有一个不错的替代方案。然而，尽管它运行良好，但并未按照现代标准构建。Iconify 2.0 使用现代技术从零开始进行了重构。

Iconify SVG 框架 2.0 有哪些新变化？ ​

  • API 冗余。网络并不总是稳定的，宕机时有发生，这是依赖第三方服务器的服务面临的最大问题。Iconify 2.0 内置了冗余机制，因此如果主 API 服务器无法访问，Iconify 会尝试从备用 API 服务器之一获取图标。
  • 新语法！ 主要差异：
    • <iconify-icon> 标签已移除。
    • 仅支持 <span> 和 <i> 标签。
    • class="iconify" 现在默认为块级图标（不带 vertical-align）。
    • class="iconify-icon" 默认为行内图标（即原来的 class="iconify"）。
    • Iconify SVG 框架会监听属性变化，但 data-inline 属性除外。这意味着，例如，如果你在已渲染的图标上更改 data-icon 属性，SVG 框架将检测到更改并更新图标。

你仍然可以使用 data-inline 属性来更改行为。Iconify 1.0 和 2.0 的代码相同：

html<p>
   Iconify 1.0 行内图标语法：
   <span class="iconify" data-icon="fa-solid:home"></span>
   <i class="iconify" data-icon="mdi-account-off"></i>
</p>
<p>
   Iconify 1.0 块级图标语法：
   <span class="iconify" data-icon="fa-solid:home" data-inline="false"></span>
   <iconify-icon data-icon="mdi-account-off"></iconify-icon>
</p>
html<p>
   Iconify 2.0 行内图标语法：
   <span class="iconify-inline" data-icon="fa-solid:home"></span>
   <i class="iconify-inline" data-icon="mdi-account-off"></i>
</p>
<p>
   Iconify 2.0 块级图标语法：
   <span class="iconify" data-icon="fa-solid:home"></span>
   <i class="iconify" data-icon="mdi-account-off"></i>
</p>

对开发者而言有哪些新变化？ ​

  • TypeScript 支持。Iconify 已使用 TypeScript 重写并导出了所有类型，使其能够轻松与 TypeScript 配合使用。
  • 可复用的共享代码。Iconify 2.0 采用模块化代码架构，允许开发者按需选择所需功能，从而轻松构建自定义实现。Vue、Svelte 以及全新的 React 组件就是其可行性的证明。
  • SVG 框架和组件现在整合在一个大型 monorepo 中，便于开发和测试通用代码。
  • 使用现代开发工具的简单构建流程。构建过程采用 TypeScript 和 Rollup，便于创建自定义打包文件。
  • 点击此处 访问新代码。

本网站的文档正在重建中。目前仍适用于 Iconify 1.0。Iconify 2.0 并非完全向后兼容，因此建议你前往 GitHub 查阅文档。如有任何疑问，请在 Iconify GitHub 仓库提交 Issue。

Iconify 版本 1.0.6 21 Apr ​

Iconify 版本 1.0.6 已发布。

此版本修复了一个导致内联样式无法从占位符传递到 SVG 的 bug。

Iconify 版本 1.0.5 31 Mar ​

Iconify 版本 1.0.5 已发布。

此版本修复了使用内容安全策略（Content Security Policy）标头时出现的问题。

如果您在 Iconify 1.* 中使用 CSP，则需要将以下 URL 添加到 script-src：https://code.iconify.design/ 和 https://api.iconify.design/。

html<meta
   http-equiv="Content-Security-Policy"
   content="default-src 'self'; script-src https://code.iconify.design/ https://api.iconify.design/"
/>

对于即将发布的 Iconify SVG 框架版本 2，标头将需要额外添加 2 个 URL：https://api.simplesvg.com 和 https://api.unisvg.com。网络并不总是稳定的，错误确实会发生（如停机、路由错误）。Iconify 版本 2 内置了冗余机制以缓解网络故障。如果在一秒内无法访问默认 API，它将尝试从备用 API 加载图标。因此，需要将备用 API 添加到允许的脚本源列表中。

html<meta
   http-equiv="Content-Security-Policy"
   content="default-src 'self'; script-src https://code.iconify.design/ https://api.iconify.design/ https://api.simplesvg.com/ https://api.unisvg.com/"
/>

Iconify 版本 1.0.4 1 Feb ​

Iconify 版本 1.0.4 已发布。

此版本允许将 @iconify/iconify 导入到 TypeScript 项目中。