# @flaticon/flaticon-uicons 中文文档

规范地址：https://npmcn.com/package/%40flaticon/flaticon-uicons/

版本：3\.3\.1
npm 元数据更新时间：2024-06-18T14:36:03.183Z
中文译文更新时间：2026-11-14T21:50:37.592Z
软件包许可：SEE LICENSE IN LICENSE

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flaticon/flaticon-uicons
原文对照：https://npmcn.com/package/%40flaticon/flaticon-uicons/?lang=original
项目主页：https://github.com/flaticon/flaticon-uicons#readme
源码仓库：https://github.com/flaticon/flaticon-uicons

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：27 MB，63 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2022-01-04T10:56:06.775Z
- 最新版本发布：2024-06-18T14:36:03.021Z
- 近 30 天下载量：112061（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 0 个）

## 中文简介

来自 Flaticon 的界面图标

## 安装

```sh
npm install @flaticon/flaticon-uicons
```

也可以使用：`pnpm add @flaticon/flaticon-uicons`、`yarn add @flaticon/flaticon-uicons`、`bun add @flaticon/flaticon-uicons`

## README

# [平纹](https://www.flaticon.com/uicons/interface-icons)

开放源代码超过4,000 SVG和网络字体优化矢量图标,可用于网络,iOS和Android应用.

![css.gg](https://media.flaticon.com/dist/min/img/interface-icons/uicons.png)

#### 新图标品牌

#### 超过20,000个图标

#### SVG 图标

#### 图片组件

# 目录

-   [开始](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-get-started)
-   [HTML 包含](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-html-include)
    -   [1\. 所有图标](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-1-all-icons)
    -   [2\. 单一图标](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-2-single-icon)
-   [CSS @ 导入](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-css--import)
    -   [1\. 所有图标](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-1-all-icons-1)
    -   [2\. 单一图标](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-2-single-icon-1)
    -   [3\. 实例](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-3-example)
-   [许可证摘要](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-4-%C4%BAicense-summary)
-   [如何属性](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-5-how-to-attribute)

# 开始

通过 npm 安装最新版本

```shell
npm i @flaticon/flaticon-uicons
```

使用软件包管理器  
此软件包包含以下目录和文件:

| 路径                             | 这是什么 |
| :-- | :-- |
| /编: | Web 字体样式表 |

# HTML 包含

#### 转到您可以在其中找到的用户指南 [平纹](https://www.flaticon.com/uicons/get-started)

# CSS @ 导入

#### 1\. 所有图标

```css
@import "~@flaticon/flaticon-uicons/css/all/all";
```

#### 2\. 单一风格

```css
@import "~@flaticon/flaticon-uicons/css/{FONTWEIGHT}/{STYLENAME}";
@import "~@flaticon/flaticon-uicons/css/brands/all";
```

| 热   | CORNER 转录器   | 序言   | 实例 |
| :-- | :-- | :-- | :-- |
| 经常 | 四舍五入 | fir -rr (英语) | `<i class="fi fi-rr-user"></i>` |
| 粗体 | 四舍五入 | 纤维 | `<i class="fi fi-br-user"></i>` |
| 固态 | 四舍五入 | fi- sr (英语) | `<i class="fi fi-sr-user"></i>` |
| 经常 | 直线 | 纤维 | `<i class="fi fi-rs-user"></i>` |
| 粗体 | 直线 | 纤维 | `<i class="fi fi-bs-user"></i>` |
| 固态 | 直线 | 单子 | `<i class="fi fi-ss-user"></i>` |
| 品牌 | 品牌 | fi- 品牌 | `<i class="fi fi-brands-facebook"></i>` |
| 细 | 四舍五入 | fi-tr (双子) | `<i class="fi fi-tr-circle-user"></i>` |
| 细 | 直线 | 单子 | `<i class="fi fi-ts-circle-user"></i>` |

##### 3\. 实例

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <i class="fi fi-rr-user"></i>
    <i class="fi fi-br-arrow-right"></i>
    <i class="fi fi-sr-book"></i>
    <i class="fi fi-rr-broom"></i>
  </body>
</html>
```

#### 4\. 许可证摘要

我们的执照允许您使用内容:

商业和个人项目 数字媒体或印刷媒体 无数次 永远 在世界任何地方 修改和衍生作品

本案文仅供参考。 它不构成任何合同义务。 更多信息,请读我们 [使用期限](https://npmcn.com/package/%40flaticon/flaticon-uicons/#readme-https://www.freepikcompany.com/legal?&_ga=2.24802994.967760339.1641199092-339376165.1634591523&_gl=1*o0lkwh*test_ga*MzM5Mzc2MTY1LjE2MzQ1OTE1MjM.*test_ga_523JXC6VL7*MTY0MTMwMDk0NC4xMzUuMS4xNjQxMzAzNTgyLjU2*fp_ga*MzM5Mzc2MTY1LjE2MzQ1OTE1MjM.*fp_ga_1ZY8468CQB*MTY0MTMwMDk0NC4zNy4xLjE2NDEzMDM1ODIuNTY.#nav-flaticon) 在使用内容之前

#### 5\. 如何归属

创建质量图标需要大量的时间和精力. 我们只要求您添加一个小的归属链接. 选择要使用资源的介质 .

复制这个链接并粘贴到任何可见的地方, 接近您使用资源的地方 。 如果无法做到这一点,请在您的网站、博客或通讯的页脚或信用栏目上登出.

```
Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>
```

## 常见问题

### @flaticon/flaticon-uicons 是什么？

来自 Flaticon 的界面图标

### 如何安装 @flaticon/flaticon-uicons？

在项目目录运行 npm install @flaticon/flaticon-uicons，或使用 pnpm add / yarn add / bun add。

### @flaticon/flaticon-uicons 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @flaticon/flaticon-uicons 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @flaticon/flaticon-uicons 可以商用吗？

@flaticon/flaticon-uicons 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @flaticon/flaticon-uicons 的下载量有多少？

根据 npm 官方下载统计，@flaticon/flaticon-uicons 在 2026/10/15 – 2026/11/13 这 30 天内被下载 112,061 次，日均约 3,735 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flaticon/flaticon-uicons 还在维护吗？

最新版本 3\.3\.1 发布于 2024/06/18（2 年前）；至今共发布 21 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/01/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。