# @coreui/icons-pro 中文文档

规范地址：https://npmcn.com/package/%40coreui/icons-pro/

版本：3\.1\.0
npm 元数据更新时间：2026-04-16T15:20:33.240Z
中文译文更新时间：2026-11-10T19:20:19.504Z
软件包许可：SEE LICENSE IN LICENSE

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

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

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

- 包体积（解压后）：39.2 MB，30388 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2020-05-23T12:27:24.885Z
- 最新版本发布：2026-04-16T15:20:33.104Z
- 近 30 天下载量：82661（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 1 个）

## 中文简介

精华相像. 更多图标,样式,工具!

## 安装

```sh
npm install @coreui/icons-pro
```

也可以使用：`pnpm add @coreui/icons-pro`、`yarn add @coreui/icons-pro`、`bun add @coreui/icons-pro`

## README

## 许可证

### CoreUI 图标 PRO - Duotone, 线性, 固态

只能从我们的网站购买有效许可证 [页: 1](https://coreui.io/icons/pro/) 为了合法地使用 CoreUI 图标 PRO.

## 预览文档( D)

[https://coreui.io/icons/ (中文(简体) )](https://coreui.io/icons/)

## 安装

### 国家预防机制

```shell
npm install @coreui/icons-pro --save
```

### 雅伦

```shell
yarn add @coreui/icons-pro
```

## 使用量

### 基本用途

使用 CSS 样式前缀和图标名称,您可以在任何地方放置 CoreUI 图标 。 CoreUI 图标被设计为与内含元素一起被使用 ex. `<i>` 或者说 `<span>`。 。 。 .

请使用 `cil-` 线性图标的前缀, `cib-` 品牌图标的前缀,以及 `cif-` 旗帜图标的前缀.

```html
<i class="cil-energy"></i>
```

```html
<i class="cib-twitter"></i>
```

```html
<i class="cif-us"></i>
```

### SVG 样板

SVG 图标允许您在网站上快速使用向量图标 。 我们已经将所有图标集的样式都准备好,形成他们自己的SVG图案.

将图示文件和其他静态文件放在您的项目中, 如图像和样式。 确保为 SVG 图示文件添加合适的路径,并使用您想要显示的 SVG 图标或符号特有的碎片标识符 .

```html
<svg>
  <use xlink:href="path/to/linear.svg#cil-airplane-mode"></use>
</svg>
<svg>
  <use xlink:href="path/to/brand.svg#cib-twitter"></use>
</svg>
<svg>
  <use xlink:href="path/to/flag.svg#cif-us"></use>
</svg>
```

### SVG 符号

当您下载您的图标集时, 它会出现一个包含 SVG 图标定义的图示目录 。 这些图标可以被引用,并作为内置的SVG像这样:

```html
<!-- Define the symbols -->
<symbol id="cil-apple" viewBox="0 0 24 24">
<title>apple</title>
<path d="M21.207 9.987c-0.497-1.275-1.29-2.262-2.293-2.863-0.25 0.477-0.524 0.888-0.835 1.267l0.010-0.013c0.002 0.001 0.004 0.002 0.005 0.003 1.494 0.859 2.364 3.054 2.114 5.338-0.414 3.784-1.563 6.377-3.236 7.302-1.087 0.601-2.444 0.516-4.031-0.254l-0.155-0.075h-1.143l-0.155 0.075c-1.588 0.77-2.944 0.856-4.031 0.254-1.673-0.925-2.822-3.518-3.236-7.302-0.25-2.284 0.619-4.479 2.114-5.338 0.445-0.259 0.979-0.411 1.549-0.411 0.011 0 0.023 0 0.034 0l-0.002-0c1.132 0 2.436 0.53 3.853 1.578l0.051 0.037s2.043-0.248 2.852-0.616c2.439-1.107 2.976-2.867 3.072-3.106 0.262-0.632 0.414-1.366 0.414-2.135 0-0.813-0.17-1.587-0.476-2.287l0.014 0.037-0.191-0.477-0.513 0.005c-3.151 0.036-5.692 2.598-5.692 5.755 0 0.255 0.017 0.507 0.049 0.754l-0.003-0.029c-0.886-0.496-1.747-0.813-2.573-0.944-1.169-0.186-2.241-0.005-3.186 0.538-1.038 0.596-1.855 1.601-2.364 2.906-0.463 1.186-0.638 2.57-0.493 3.895 0.475 4.344 1.859 7.267 4.001 8.452 0.655 0.37 1.438 0.588 2.272 0.588 0.010 0 0.021-0 0.031-0h-0.002c0.918-0 1.904-0.244 2.952-0.73h0.461c1.987 0.923 3.754 0.971 5.253 0.142 2.142-1.185 3.526-4.107 4.001-8.452 0.145-1.325-0.030-2.709-0.493-3.895zM15.376 2.851c0.322-0.143 0.697-0.251 1.088-0.305l0.022-0.003c0.106 0.354 0.167 0.761 0.167 1.182 0 2.15-1.593 3.927-3.663 4.215l-0.022 0.003c-0.106-0.354-0.167-0.76-0.167-1.181 0-1.743 1.048-3.242 2.547-3.901l0.027-0.011z"></path>
</symbol>

<!-- Use the defined symbols -->
<svg>
  <use xlink:href="#cil-apple"></use>
</svg>
```

还可与包含下列定义的外部SVG链接:

```html
<svg class="icon-home">
  <use xlink:href="path/to/lineear.svg#cil-apple"></use>
</svg>
```

引用外部 SVG 的优点是您的图标被缓存, 并有一个 HTTP 请求 。 但是外部的SVG和HTML应该从同一个域来服务. 这种方法在现代浏览器中效果很好,除了IE 9+. 为了支持 IE 9+, 您应该使用 `/js/svgxuse.js` 或者说 `/js/svgxuse.min.js`。如果图标被正确装入,这种多填充会检测;如果不装入,它会发出一个HTTP请求来获取并缓存符号定义.

```html
<script defer src="https://unpkg.com/@coreui/icons/js/svgxuse.js"></script>
```

### Vue.js 的 CoreUI 图标

请检查 [官方仓库](https://github.com/coreui/coreui-icons-vue)

### React.js 的核心UI 图标

请检查 [官方仓库](https://github.com/coreui/coreui-icons-react)

## 常见问题

### @coreui/icons-pro 是什么？

精华相像\. 更多图标,样式,工具\!

### 如何安装 @coreui/icons-pro？

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

### @coreui/icons-pro 支持 TypeScript 吗？

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

### @coreui/icons-pro 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @coreui/icons-pro 可以商用吗？

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

### @coreui/icons-pro 的下载量有多少？

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

### @coreui/icons-pro 还在维护吗？

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