# @financial-times/o-icons 中文文档 规范地址：https://npmcn.com/package/%40financial-times/o-icons/ 版本：7\.10\.1 npm 元数据更新时间：2026-10-06T13:39:47.993Z 中文译文更新时间：2026-11-14T18:23:51.262Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-icons 原文对照：https://npmcn.com/package/%40financial-times/o-icons/?lang=original 项目主页：https://registry.origami.ft.com/components/o-icons 弃用说明：Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\. ## 关键信息（来自 npm 元数据） - 包体积（解压后）：33.2 kB，17 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：0 个 - 首次发布：2019-02-12T16:03:55.209Z - 最新版本发布：2026-02-26T10:55:16.603Z - 近 30 天下载量：14809（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：42（近 12 个月 1 个） ## 中文简介 用于使用 FT 图标的 Helper SCSS 工具. 关于可用的图标的完整列表,请参见fticons 图像集 ## 安装 ```sh npm install @financial-times/o-icons ``` 也可以使用：`pnpm add @financial-times/o-icons`、`yarn add @financial-times/o-icons`、`bun add @financial-times/o-icons` ## README > ⚠️ **注:** 已替换为 : [o3 创建](https://npmcn.com/package/%40financial-times/o3-foundation/README.md)请参看 [移徙指南](https://npmcn.com/package/%40financial-times/o-icons/MIGRATION.md#migrating-from-v7-to-o3-foundation@3) 用于升级的步骤. # 缩略语 帮手萨斯 [语句](https://o2-core.origami.ft.com/?path=/story/deprecated-o-icons--icons) 图像设定 . - [缩略语](https://npmcn.com/package/%40financial-times/o-icons/#readme-o-icons) - [使用量](https://npmcn.com/package/%40financial-times/o-icons/#readme-usage) - [内容提要](https://npmcn.com/package/%40financial-times/o-icons/#readme-summary) - [标记](https://npmcn.com/package/%40financial-times/o-icons/#readme-markup) - [萨斯](https://npmcn.com/package/%40financial-times/o-icons/#readme-sass) - [包括大小和颜色不同的图标](https://npmcn.com/package/%40financial-times/o-icons/#readme-includes-icons-of-different-sizes-and-colors) - [使用默认 CSS 帮助类](https://npmcn.com/package/%40financial-times/o-icons/#readme-using-the-default-css-helper-classes) - [捐款](https://npmcn.com/package/%40financial-times/o-icons/#readme-contributing) - [移徙](https://npmcn.com/package/%40financial-times/o-icons/#readme-migration) - [联系人](https://npmcn.com/package/%40financial-times/o-icons/#readme-contact) - [许可证](https://npmcn.com/package/%40financial-times/o-icons/#readme-licence) ## 使用量 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-icons`。 。 。 . ## 内容提要 有一些方法可以让图标从 `fticons`数字 : 1. 使用 [o-米ons CSS课程](https://npmcn.com/package/%40financial-times/o-icons/#readme-markup) 2. 使用 [o- 相片混音器](https://npmcn.com/package/%40financial-times/o-icons/#readme-sass) 还有你自己的CSS. 3. 直接从 [图像服务](https://www.ft.com/__origami/service/image/v2/docs/url-builder?url=fticon-v1%3Aarrow-down&preview=true) (完全不使用o-icons). ## 标记 要添加图标,请应用 `o-icons-icon` 类为 a `span`,与特定图标的修饰类一起,例如:. `o-icons-icon--arrow-down`见 [故事书演示](https://o2-core.origami.ft.com/?path=/story/deprecated-o-icons--icons) 对于完整的图标列表. ```html ``` 这将包括带有 `128px` 默认宽度/ 高度 . 如果您想要使用不同尺寸或颜色的图标,请使用 `o-icon` [萨斯](https://npmcn.com/package/%40financial-times/o-icons/#readme-sass) 混合或请求从 [图像服务](https://www.ft.com/__origami/service/image/v2/docs/url-builder?url=fticon-v1%3Aarrow-down&preview=true) 直接( 完全不使用 o- icons) . ## 萨斯 ### 包括大小和颜色不同的图标 使用 `oIconsContent` 以输出具有特定大小和颜色的图标的样式. 这个 `$color` 参数应使用 [o-颜色](https://o2-core.origami.ft.com/?path=/docs/deprecated-o-colors-readme--docs) Sass 函数, 例如 `oColorsByName`,但可能设置为任意十六进制值. ```scss // Use o-colors so you can use colors from the Origami palette. @import "@financial-times/o-icons/main"; @import "@financial-times/o-colors/main"; // Output a 32px, claret coloured plus icon. .my-icon-plus { @include oIconsContent( $icon-name: 'plus', $color: oColorsByName('claret'), $size: 32 ); } ``` ```html ``` 这个 `oIconsContent` 混合每个图标所用的输出样式。 如果您的工程输出多个图标, 效率会低 。 在这种情况下,我们建议将基底样式与 `oIconsContentBaseStyles`。 。 。 . ```scss // Output a 32px, claret coloured plus icon. .my-icon { @include oIconsContentBaseStyles(); } .my-icon--plus { @include oIconsContent( $icon-name: 'plus', $color: oColorsByName('claret'), $size: 32, $include-base-styles: false // do not duplicate the base styles ); } ``` ```html ``` `o-icons` 包括一个媒体查询,以恢复微软高相容模式中的黑色或白色图标. 如果无法为微软的高相容模式的用户接受图标, 则可能无法减少捆绑大小 : ```scss .no-high-contrast-window { @include oIconsContent( $icon-name: 'plus', $color: oColorsByName('claret'), $high-contrast-fallback: false ); } ``` ### 使用默认 CSS 帮助类 输出全部图标 [帮助类](https://npmcn.com/package/%40financial-times/o-icons/#readme-markup) 包括 `oIcons` 混合剂. ```scss @import "@financial-times/o-icons/main"; @include oIcons(); // include helper classes for all icons ``` 避免包含全部图标 [帮助类](https://npmcn.com/package/%40financial-times/o-icons/#readme-markup), (中文(简体) ), `oIcons` mixin还接受一个图标列表,包括: ```scss @include oIcons($opts: ( 'icons': ('arrow-down', 'audio') // include helper classes for the arrow-down and audio icons )); ``` ## 捐款 `o-icons` 是一些用于使用fticons 图像集的 Sass 混音器和助手 。 要添加新图标, 您需要添加到缩写集中 。 里面有说明 [折纸图像服务](https://github.com/Financial-Times/origami-image-service#adding-images)。当图标在窗体中时,运行 `node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON` 用于更新 `o-icons` 自动与新图标相配合 . 如果您需要删除图标 `o-icons` 运行 `node ./scripts/build-icon-list.js NAME_OF_THE_NEW_ICON remove`。 。 。 . ## 移徙 | 状态 | 主要版本 | 最后一个小版本 | 移徙指南 | | :-: | :-: | :-: | :-: | | 活动 | 单位3 | 不详 | [迁移到 o3](https://npmcn.com/package/%40financial-times/o-icons/MIGRATION.md#migrating-from-v7-to-o3-foundation@3) | | 已贬值 | 第7条 | 不详 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-icons/MIGRATION.md#migrating-from-v6-to-v7) | | 已贬值 | 6个 | 第6.3条 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-icons/MIGRATION.md#migrating-from-v5-to-v6) | | 已贬值 | 页:1 | 5.9 (中文(简体) ) | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-icons/MIGRATION.md#migrating-from-v4-to-v5) | | 已贬值 | 页:1 | 4.5 国家 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-icons/MIGRATION.md#migrating-from-v3-to-v4) | | 已贬值 | 3个 | 3.3 国家 | \- 说吧 | | 已贬值 | 2个 | 2.4 国家 | \- 说吧 | | 已贬值 | 1个 | 1.2 国家 | \- 说吧 | ## 联系人 如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-icons/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 . * * * ## 许可证 本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 . ## 常见问题 ### @financial-times/o-icons 是什么？ 用于使用 FT 图标的 Helper SCSS 工具\. 关于可用的图标的完整列表,请参见fticons 图像集注意：该包已被作者标记为弃用——Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\. ### 如何安装 @financial-times/o-icons？ 在项目目录运行 npm install @financial-times/o-icons，或使用 pnpm add / yarn add / bun add。 ### @financial-times/o-icons 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-icons 是否存在。 ### @financial-times/o-icons 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @financial-times/o-icons 可以商用吗？ @financial-times/o-icons 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @financial-times/o-icons 的下载量有多少？ 根据 npm 官方下载统计，@financial-times/o-icons 在 2026/10/15 – 2026/11/13 这 30 天内被下载 14,809 次，日均约 494 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @financial-times/o-icons 还在维护吗？ 最新版本 7\.10\.1 发布于 2026/02/26（8 个月前）；至今共发布 42 个版本，其中过去 12 个月发布了 1 个；首次发布于 2019/02/13。作者已将其标记为弃用，新项目建议寻找替代方案。