# @fonticonpicker/react-fonticonpicker 中文文档

规范地址：https://npmcn.com/package/%40fonticonpicker/react-fonticonpicker/

版本：1\.2\.0
npm 元数据更新时间：2022-04-05T11:37:19.895Z
中文译文更新时间：2026-11-15T04:25:12.376Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1 MB，17 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：react ^16\.3\.0，react-dom ^16\.3\.0，classnames ^2\.2\.5，prop-types ^15\.6\.1，react-transition-group ^2\.3\.0
- 首次发布：2018-04-05T17:00:08.276Z
- 最新版本发布：2018-10-21T04:41:46.557Z
- 近 30 天下载量：3149（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

一个反应组件来显示一个拾取元素来选择字体图标或SVG.

## 安装

```sh
npm install @fonticonpicker/react-fonticonpicker
```

也可以使用：`pnpm add @fonticonpicker/react-fonticonpicker`、`yarn add @fonticonpicker/react-fonticonpicker`、`bun add @fonticonpicker/react-fonticonpicker`

## README

# 反应字体IconPicker组件

[![codecov](https://codecov.io/gh/fontIconPicker/react-fonticonpicker/branch/master/graph/badge.svg)](https://codecov.io/gh/fontIconPicker/react-fonticonpicker) [![Build Status](https://travis-ci.org/fontIconPicker/react-fonticonpicker.svg?branch=master)](https://travis-ci.org/fontIconPicker/react-fonticonpicker) [![jest](https://facebook.github.io/jest/img/jest-badge.svg)](https://github.com/facebook/jest) [![npm version](https://badge.fury.io/js/%40fonticonpicker%2Freact-fonticonpicker.svg)](https://badge.fury.io/js/%40fonticonpicker%2Freact-fonticonpicker) [![peerDependencies Status](https://david-dm.org/fontIconPicker/react-fonticonpicker/peer-status.svg)](https://david-dm.org/fontIconPicker/react-fonticonpicker?type=peer) [![GitHub license](https://img.shields.io/github/license/fontIconPicker/react-fonticonpicker.svg)](https://github.com/fontIconPicker/react-fonticonpicker/blob/master/LICENSE)

* * *

[![FontIconPicker](https://npmcn.com/package/%40fonticonpicker/react-fonticonpicker/fonticonpicker.png)](https://npmcn.com/package/%40fonticonpicker/react-fonticonpicker/fonticonpicker.png)

反应版本 [字体Icon Picker 键](https://fonticonpicker.github.io/)这是 重写, 不是围绕 jQuery 版本的包装 .

使用 FontIconPicker 组件,您可以呈现一个用户界面,人们可以选择一个或 更多字体。 在赤骨中,它看起来像这样.

## 安装

### 国家预防机制或也门

国家预防机制是首选的设置方式。 你可以从那里找到它 [这里](https://www.npmjs.com/package/@fonticonpicker/react-fonticonpicker)。 。 。 .

从你的项目做

```bash
npm i @fonticonpicker/react-fonticonpicker
```

同时安装对等依赖性 .

```bash
npm i react react-dom classnames prop-types react-transition-group
```

并需要文件.

#### ES6 标准

```js
import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
```

#### ES5号机车

```js
const FontIconPicker = require('@fonticonpicker/react-fonticonpicker');
```

并用作回放组件. 检查 [文档网站](http://fonticonpicker.github.io/react-fonticonpicker/) 比方说.

### 光盘N

出于某种原因,如果你更喜欢CDN,那么它可以在 [unpkg.com (英语)](https://unpkg.com/@fonticonpicker/react-fonticonpicker/dist/)。 。 。 .

在您的 HTML 文档中设置它们, 并同时设置对等依赖的 UMD 构建 .

### 下载源

我们分发源文件的制作版本 [基子释放](https://github.com/fontIconPicker/react-fonticonpicker/releases)头在那边 和下载 `fonticonpicker.react.zip` 文档.

## 使用量

这里有一个例子,与 [创建- 反应- 应用程序](https://github.com/facebook/create-react-app)。 。 。 .

从您的工程目录中可以 :

```bash
yarn add classnames prop-types react-transition-group @fonticonpicker/react-fonticonpicker
```

现在编辑您的 `App.js` 文档包含以下内容.

```js
import React, { Component } from 'react';
import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
import logo from './logo.svg';
import './App.css';
import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css';
import '@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.material-theme.react.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'fipicon-angle-left',
    };
  }
  handleChange = (value) => {
    this.setState({ value });
  }
  render() {
    const props = {
      icons: ['fipicon-angle-left', 'fipicon-angle-right', 'fipicon-angle-up', 'fipicon-angle-down'],
      theme: 'bluegrey',
      renderUsing: 'class',
      value: this.state.value,
      onChange: this.handleChange,
      isMulti: false,
    };
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <FontIconPicker {...props} />
      </div>
    );
  }
}

export default App;
```

[![create-react-app](https://npmcn.com/package/%40fonticonpicker/react-fonticonpicker/create-react-app.png)](https://npmcn.com/package/%40fonticonpicker/react-fonticonpicker/create-react-app.png)

这将成为一个基本的 FontIconPicker 组件 。 高级用法如下: 页:1 [文档](https://fonticonpicker.github.io/react-fonticonpicker/)。 。 。 .

## 道具

| Prop | 类型 | 需求 | 默认 |
| --- | --- | --- | --- |
| 图标 | `object` 联 合 国 `array` 或者说 `array` | 对 | 不详 |
| 变化 | `func` | 对 | 不详 |
| 搜索 | `object` 联 合 国 `array` 或者说 `array` | 没有 | `null` |
| 图标 | 编号 | 没有 | `20` |
| 主题 | `string` | 没有 | `'default'` |
| 显示类别 | `bool` | 没有 | `true` |
| 显示搜索 | `bool` | 没有 | `true` |
| 价值 | `array` 或者说 `string` | 没有 | 无效 |
| 复数 | `bool` | 没有 | `false` |
| 生成Using | `string` | 没有 | `'class'` |
| 转换Hex | `bool` | 没有 | `true` |
| 制作 Func | `func` | 没有 | 无效 |
| 附录 | `string` | 没有 | 虚假 |
| 全部选择位置符 | `string` | 没有 | `'Show from all'` |
| 搜索文件夹 | `string` | 没有 | `'Search Icons'` |
| 无Icon平面符 | `string` | 没有 | `'No icons found'` |
| 无选中 占位符 | `string` | 没有 | `'Select icon'` |

## 发展环境

开发和建设是在下列各方的帮助下进行的: [网络软件包](https://webpack.js.org/)。 。 。 .

先用叉子和克特克隆你的机器上的回波.

```bash
git clone git@github.com:<username>/react-fonticonpicker.git
```

现在安装所有依赖。 确保你有 [节点](https://nodejs.org/en/) 版本9或更高.

```bash
npm install
```

现在运行服务器

```bash
npm start
```

这将打开一个热重装的 Webpack dev 服务器 。 您可以访问服务器 从 [http://localhost:7770 (英语)](http://localhost:7770/)。 。 。 .

现在对组件进行修改,并看到其活化. 增加单位测试和 酌情进行融合测试.

如果您的修改会使快照无效, 请确保将它们更新( 使用 理由充分).

在做公关时,尽量不要建立文件或文件。 这会造成不必要的 合并冲突.

正在处置的其他 npm 命令 :

-   `npm run test`: 运行 `eslint` 接下来是 `stylelint` 财务报告和审定财务报表 `jest` 测试.
-   `npm run start`:运行有热重载的dev服务器.
-   `npm run docs`:为生产建造文件.
-   `npm run build`: 构建UMD & CSS文件以供发行.

## 贷项

反应字体IconPicker 已被开发 [洗手间](https://swashata.me/) 主要用于: [表格](https://eform.live/)。 。 。 . 最初的想法来自 [j 查询字体](https://github.com/fontIconPicker/fontIconPicker) 以 [亚历山德罗·比诺伊特](http://codeb.it/)。 。 。 .

没有凉爽,这些都不可能 [韦斯·博斯](https://wesbos.com/) 他的电话 [对初学者课程的反应](https://reactforbeginners.com/)这真是太棒了.

## 常见问题

### @fonticonpicker/react-fonticonpicker 是什么？

一个反应组件来显示一个拾取元素来选择字体图标或SVG\.

### 如何安装 @fonticonpicker/react-fonticonpicker？

在项目目录运行 npm install @fonticonpicker/react-fonticonpicker，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.3\.0）、react-dom（^16\.3\.0）、classnames（^2\.2\.5）、prop-types（^15\.6\.1）、react-transition-group（^2\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fonticonpicker/react-fonticonpicker 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fonticonpicker\_\_react-fonticonpicker 是否存在。

### @fonticonpicker/react-fonticonpicker 支持 ESM 还是 CommonJS？

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

### @fonticonpicker/react-fonticonpicker 可以商用吗？

@fonticonpicker/react-fonticonpicker 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fonticonpicker/react-fonticonpicker 的下载量有多少？

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

### @fonticonpicker/react-fonticonpicker 还在维护吗？

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