# @evicons/react 中文文档

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

版本：0\.8\.0
npm 元数据更新时间：2026-11-04T13:58:01.981Z
中文译文更新时间：2026-11-14T02:07:39.009Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：84.6 kB，177 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0
- 首次发布：2026-11-02T07:22:49.419Z
- 最新版本发布：2026-11-04T13:57:59.652Z
- 近 30 天下载量：3585（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

EVicons 反应 电子移动和EV充电的图标组件

## 安装

```sh
npm install @evicons/react
```

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

## README

[![EVicons](https://raw.githubusercontent.com/evicons/evicons/main/brand/logo.svg)](https://evicons.dev/)

# @ evicons/ 反应

网站: [{\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我很高兴见到你](https://evicons.dev/)

反应组件用于 [电子图像](https://github.com/evicons/evicons),麻省理工学院许可的用于电子移动和EV充电的大纲图标:充电站,接通面,AC/DC和动力,能,车辆,支付,充电点状态和地图标记.

EVicons只覆盖了电子移动;继续使用Lucide等通用图标集用于普通UI图标. 图标使用 `currentColor` 不包含颜色。 Raw SVG 文件、 图标和元数据都在 [`@evicons/svg`](https://www.npmjs.com/package/@evicons/svg)。 。 。 .

## 安装

```sh
npm install @evicons/react
```

## 使用量

```tsx
import { PlugType2 } from '@evicons/react'

export function Connector() {
  return (
    <span>
      <PlugType2 size={20} title="Type 2" /> Type 2 · 22 kW
    </span>
  )
}
```

每个图标都是自己的模块,包有 `sideEffects: false`,因此捆绑器只包含您导入的图标。 单个图标也可以作为命名或默认导出直接导入:

```tsx
import PlugType2 from '@evicons/react/icons/plug-type-2'
```

## 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `size` | `number | string` | `24` | 宽度和高度 `<svg>`数字是像素;字符串是按原样传递的(例如) `"1em"`) (中文(简体) ). |
| `strokeWidth` | `number | string` | `1.5` | 在图标单位中划出宽度(图标被绘制在一个24×24格上). |
| `absoluteStrokeWidth` | `boolean` | `false` | 保持中风 `strokeWidth` 每个大小的屏幕像素(见下文). |
| `className` | `string` |  | 内置课后添加 `evicon` 财务报告和审定财务报表 `evicon-<name>` (例如 `evicon-plug-type-2`) (中文(简体) ). |
| `title` | `string` |  | 可读取名称, 变为 `<title>` (见 [无障碍](https://npmcn.com/package/%40evicons/react/#readme-accessibility)) (中文(简体) ). |
| `ref` |  |  | 转交 `<svg>` 键. |
| 其他SVG道具 |  |  | 路过 `<svg>` 要素(`style`, (中文(简体) ), `onClick`, (中文(简体) ), `data-*`, (中文(简体) ), `aria-*`, (中文(简体) ), `role`(中文(简体) ). 儿童是在圣像外形后产生的. |

道具类型导出为 `EvIconProps`,组件类型为 `EvIconComponent`。 。 。 .

## 颜色

图标绘制为 `currentColor`设置 CSS `color` 图标或父图标:

```tsx
<StatusAvailable className="text-green-600" title="Available" />
```

## `absoluteStrokeWidth`

默认带有图标的中风平面: at `size={12}` a 1.5的中风为0.75平方厘米宽。 与 `absoluteStrokeWidth`,每个形状得到 `vector-effect="non-scaling-stroke"`,所以中风 `strokeWidth` 屏幕像素宽度,无论大小大小.

因为这是由浏览器完成的,而不是从 `size`,当大小来自 CSS 时也会起作用(`size="1em"`, (中文(简体) ), `className="size-4"`,非平方尺寸). 你小时候通过的形状没有改变.

## 小号

16 px 的默认中风被画出 1 px 宽. 保持满重的重量 `absoluteStrokeWidth` 财务报告和审定财务报表 `strokeWidth={1.5}`,或与 `strokeWidth={2}` 不使用时 `absoluteStrokeWidth`。紧接 Lucide 图标(中风2),设置 `strokeWidth={2}` 所以两套都一样重 这使中风相对于图画会更厚,因此小螺栓周围的切出等紧缺可能会关闭;用这个尺寸检查图标.

并非所有图标在 16 px 可读 。 使用这些来自 20 px: 连接符面 (类) `connector`数字 : `plug-type-1`, (中文(简体) ), `plug-type-2`, (中文(简体) ), `plug-ccs1`, (中文(简体) ), `plug-ccs2`, (中文(简体) ), `plug-chademo`, (中文(简体) ), `plug-nacs`, (中文(简体) ), `plug-gbt-dc`, (中文(简体) ), `plug-mcs`, (中文(简体) ), `plug-schuko`, (中文(简体) ), `plug-cee-blue`, (中文(简体) ), `plug-cee-red`),字母图标(`current-ac`, (中文(简体) ), `current-dc`, (中文(简体) ), `power-kw`, (中文(简体) ), `parking-charging`, (中文(简体) ), `bike-electric`, (中文(简体) ), `motorcycle-electric` 财务报告和审定财务报表 `charging-availability`。使用地图标记(`marker-*`从24 px.

## 无障碍

图标默认为装饰: `<svg>` 获得 `aria-hidden="true"` 没有角色。 图标补充可见文本;当一个图标单独站立并带有意义时,给它一个可访问的名称. 一旦它有一个, `aria-hidden` 被丢弃,并 `role="img"` 已经设定.

如果给出了几项,则适用这一命令:

1.  **`aria-labelledby`** 保持原样.
2.  **`aria-label`**:用为名. A 类 `title` 仍为 `<title>` 但没有参考.
3.  **`title`**:作为第一个孩子提供 `<title>` 以 React 的 ID 为单位 `useId` (在服务器渲染方面的独特性和稳定性)和引用 `aria-labelledby`。 。 。 .
4.  没有任何装饰性(`aria-hidden="true"`) (中文(简体) ).

明确 `role` 或者说 `aria-hidden` 你总是胜过违约.

```tsx
<StatusFaulted title="Faulted" />                    // role="img", named "Faulted"
<StatusFaulted aria-label="Charge point faulted" />  // role="img", named by aria-label
<StatusFaulted />                                    // aria-hidden="true"
```

## 图标补充文本

不使用图标作为信息的唯一载体。 在 16 px 时, 连接器相接的相接点会变成相似的相接点, 所以分享一部分的相接点很难区分: `plug-type-2` 财务报告和审定财务报表 `plug-ccs2` 仅在Type 2联系方式下的DC部分不同, `plug-type-1` 财务报告和审定财务报表 `plug-ccs1` 仅在1型接触器下方的DC对. `plug-gbt-dc` 与 `plug-type-2` 主要由两个DC大环和较高的平缘所组成. 同样 `plug-type-1`, (中文(简体) ), `plug-chademo` 财务报告和审定财务报表 `plug-schuko` 16平方公尺长相相似 `plug-cee-blue` 类似 `plug-type-1` (一个较大的上方有两个接触;中东欧面有下方的钥匙). 总是在图标旁边显示连接符名称,例如"Type 2-22 kW". 这同样适用于状态图标:显示状态为文本或至少为可访问名称.

## 状态重叠模式

要将状态与另一个图标结合起来,请设置一个小状态图标(基数的一半,与 `absoluteStrokeWidth`绝对在右下角。 见 [存储器中的实例](https://github.com/evicons/evicons#status-overlay-pattern)。 。 。 .

## 图标

### 连接器

| 名称 | 反应组件 | 含义 |
| --- | --- | --- |
| `plug-type-2` | `PlugType2` | 2型接通器(IEC 62196-2"Mennekes"),显示为车辆接通相;GB/T 20234.2 AC接通相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接 |
| `plug-ccs2` | `PlugCcs2` | CCS Combo 2连接器(IEC 62196-3,型号为2,有2个DC接触器),显示为车辆内接相 |
| `plug-chademo` | `PlugChademo` | CHAdeMO DC接通器(IEC 62196-3配置 AA,JEVS G105),显示为车辆内入相 |
| `plug-schuko` | `PlugSchuko` | Schuko socket (CEE 7/3, DIN 49440, 家用AC), 显示为正面可见的 socket face |
| `plug-type-1` | `PlugType1` | 1型AC接通器(SAE J1772,IEC 62196-2 1型;北美,日本),显示为车辆入相 |
| `plug-ccs1` | `PlugCcs1` | CCS Combo 1 连接器(IEC 62196-3配置 EE,SAE J1772) 1型,带有两个DC联系人;北美),显示为载体外接相 |
| `plug-nacs` | `PlugNacs` | NACS连接器(SAE J3400,北美充电标准;AC和DC通过同一种电源接触),显示为车辆入射相 |
| `plug-gbt-dc` | `PlugGbtDc` | GB/T DC接通器(GB/T 20234.3,中国;DC快速充电联系人DC+,DC−,PE,S+,S−,CC1,CC2,A+,A−),显示为车辆外形 |
| `plug-mcs` | `PlugMcs` | MCS连接器(Megawat充电系统,SAE J3271 / IEC 63379;DC对卡车和客车充电,其联系人为DC+、DC-、PE和4个通讯和检测联系人),显示为车辆外接面 |
| `plug-cee-blue` | `PlugCeeBlue` | 中东欧蓝色套接字(IEC 60309-2, 2P+E, 230 V, 16/32 A,以6h为单位;露营地或花篷套接字),显示为从正面看到的套接字面 |
| `plug-cee-red` | `PlugCeeRed` | 中东欧红色套接字(IEC 60309-2、3P+N+E、400 V 三相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 |

### 站和站点

| 名称 | 反应组件 | 含义 |
| --- | --- | --- |
| `charging-station` | `ChargingStation` | 充电站:电动车辆的公用或私用充电站 |
| `charging-plug` | `ChargingPlug` | 一般充电插件,从侧面可以看到它的电缆(没有特定的连接器类型) |
| `charging-cable` | `ChargingCable` | 充电接通电荷点的电缆(带插头的电缆,不需要自己的电缆) |
| `wallbox` | `Wallbox` | 墙箱:电动车辆的墙上自用充电器 |
| `home-charging` | `HomeCharging` | 家用充电:家用车辆充电 |
| `parking-charging` | `ParkingCharging` | 充电停车:电动车辆可充电的停车空间 |
| `charging-operator` | `ChargingOperator` | 充电点运营商(CPO):运行充电点的公司 |
| `destination-charging` | `DestinationCharging` | 目的地收费:在旅馆、商店或餐馆住宿期间收费 |
| `report-fault` | `ReportFault` | 报告过错:告诉操作员充电点有电气或技术问题 |
| `fuel-station-charging` | `FuelStationCharging` | 燃料站充电:一个燃料站或服务站的充电点(树冠下) |
| `dealer-charging` | `DealerCharging` | 汽车经销商充电:汽车经销商、展示室或车库充电点 |
| `shop-charging` | `ShopCharging` | 购物时充电:超市、购物中心或零售停车场充电点 |
| `streetlight-charging` | `StreetlightCharging` | 街道灯光充电:建入街道灯光的充电点(kerbside充电) |
| `charging-hub` | `ChargingHub` | 充电枢纽:一个站点,在一个站点设有几个充电点(HPC枢纽,充电公园) |
| `highway-charging` | `HighwayCharging` | 高速公路收费:在高速公路上或旁边收费(服务区,休息站) |
| `accessible-charging` | `AccessibleCharging` | 无障碍充电湾:可以从轮椅上使用的充电点(无步道、更宽的海湾、可到达的控制) |
| `charging-availability` | `ChargingAvailability` | 充电可用性:一个地点有多少充电点是免费的或占用的 |
| `station-uptime` | `StationUptime` | 车站运行时间:一个充电点随时间推移的运行状况,其可靠性(例如在过去30天中可用) |
| `restricted-access` | `RestrictedAccess` | 限制进入:充电点不向所有人开放(仅向私人开放,仅向客户开放,仅向公司车辆开放,在屏障后方开放) |
| `community-verified` | `CommunityVerified` | 社区核实:由司机报告或确认的信息(例如价格、免费收费或小费) |
| `register-verified` | `RegisterVerified` | 列入正式充电点登记册,例如监管机构保存的国家登记册(来自当局的数据,而不是用户的数据) |
| `charging-socket` | `ChargingSocket` | 充电套接字:充电点有套接字出入口,带回自有电缆(无接线电缆) |

### 电力和能源

| 名称 | 反应组件 | 含义 |
| --- | --- | --- |
| `current-ac` | `CurrentAc` | 替换电流( AC) 充电 |
| `current-dc` | `CurrentDc` | 直接电流(DC)充电 |
| `fast-charging` | `FastCharging` | 快充电:高充电功率,一般为DC快充电或高充电 |
| `charging-bolt` | `ChargingBolt` | 充电或一般用电(平方闪电) |
| `power-kw` | `PowerKw` | 千瓦功率,例如电荷点的充电功率 |
| `solar-charging` | `SolarCharging` | 太阳能充电:用光电充电(光电剩余) |
| `green-power` | `GreenPower` | 绿色电力:可再生能源发电 |
| `battery-charging` | `BatteryCharging` | 电池充电:车用电池充电 |
| `bidirectional-charging` | `BidirectionalCharging` | 双向充电:进出车辆的能流(V2G,V2H) |
| `charging-power-level` | `ChargingPowerLevel` | 充电电级:显示在比例尺(kW显示,电源过滤器)上的充电功率 |
| `charging-session` | `ChargingSession` | 充电会话正在进行:车辆正在充电(直播会话) |
| `power-outage` | `PowerOutage` | 断电:现场没有电网供电,充电点没有供电 |
| `charging-time` | `ChargingTime` | 充电时间:充电会议需要多长时间,或按时间计算的关税 |

### 车辆

| 名称 | 反应组件 | 含义 |
| --- | --- | --- |
| `car-plugged` | `CarPlugged` | 与充电电缆连接的电动车 |
| `car-electric` | `CarElectric` | 电动车(电池电动车) |
| `driving-range` | `DrivingRange` | 距离:车辆可按电池充电驱动的距离 |
| `route-to-charger` | `RouteToCharger` | 通向充电器的路线:通向充电点 |
| `truck-electric` | `TruckElectric` | 电动卡车:一辆电池电动货车(N级车辆) |
| `bus-electric` | `BusElectric` | 电动客车:电池电动客车或教练车(车辆级M2/M3) |
| `bike-electric` | `BikeElectric` | 电力机车:电子自行车,pedelec或电动货运机车(轻型电力机车) |
| `motorcycle-electric` | `MotorcycleElectric` | 电动摩托车或电动摩托车(L类车辆,例如L1e和L3e) |
| `plug-in-hybrid` | `PlugInHybrid` | 插件混合式(PHEV):从电网充电并运行于燃料上的一辆车 |

### 付款

| 名称 | 反应组件 | 含义 |
| --- | --- | --- |
| `charging-card` | `ChargingCard` | 充值卡:启动充值会话的RFID卡 |
| `app-charging` | `AppCharging` | 通过应用充电:启动并支付使用智能手机应用的充电会话 |
| `card-terminal` | `CardTerminal` | 卡片终端:通过借记卡或信用卡临时支付,无联系 |
| `roaming` | `Roaming` | 漫游:向另一供应商收取合同费用 |
| `charging-tariff` | `ChargingTariff` | 收费:收费价格,例如每千瓦时 |
| `charging-log` | `ChargingLog` | 充电日志:充电会话记录,例如日志簿或收据 |
| `calibrated-meter` | `CalibratedMeter` | 校正计数器:充电点用符合校正定律的计数器计算能量(Eichrecht) |
| `free-charging` | `FreeCharging` | 免费收费:免费向司机收费 |
| `idle-fee` | `IdleFee` | 闲置费:充电完成后占用充电点的费用 |
| `qr-charging` | `QrCharging` | QR 代码充电: 通过扫描充电点的 QR 代码来启动或支付充电会话的临时费用 |
| `plug-and-charge` | `PlugAndCharge` | 插件充电: 车辆在插入时自动授权充电会话( ISO 15118) |

### 状态

状态图标共享圆框;内部的标志带有意义.

| 名称 | 反应组件 | 签名 | 含义 |
| --- | --- | --- | --- |
| `status-available` | `StatusAvailable` | 手握着插头 | 可用:收费点是免费的,随时可以收费 |
| `status-occupied` | `StatusOccupied` | 时钟 | 占用:充电点被另一辆车使用 |
| `status-faulted` | `StatusFaulted` | 感叹标记 | 故障: 车站报告出错, 不能收费 |
| `status-out-of-service` | `StatusOutOfService` | 跨出插头 | 退出服务:操作员退出服务(例如维护或关闭),而不是错误报告 |
| `status-reserved` | `StatusReserved` | 字母 R | 预留:充值点为预订 |
| `status-unknown` | `StatusUnknown` | 问号 | 未知: 充电点没有当前状态 |
| `status-queue` | `StatusQueue` | 两辆车,一辆车后面 | 排队:车在本站排队;你必须等待 |

"故障"(车站报告出错)和"退出服务"(运营商退出服务)是不同的状态;使用你的数据实际报告.

### 标记

头部有标志的地图指针(集群指针使其空出一个计数),为24-40 px;见 [地图标记](https://npmcn.com/package/%40evicons/react/#readme-map-markers) 用于填充模式.

充电标记已命名 `marker-charging` (单位:千美元)`MarkerCharging`(没有) `marker`,使其不与 `Marker` 地图库的组件(MapLibre、Mapbox、Leaflet、Google地图).

| 名称 | 反应组件 | 签名 | 含义 |
| --- | --- | --- | --- |
| `marker-charging` | `MarkerCharging` | 闪光螺栓 | 充电点的地图标记 |
| `marker-ac` | `MarkerAc` | AC字母数 | AC 充电点的地图标记 |
| `marker-dc` | `MarkerDc` | 字母数 DC | DC 充电点的地图标记 |
| `marker-available` | `MarkerAvailable` | 检查标记 | 地图标记: 充电点可用 |
| `marker-occupied` | `MarkerOccupied` | 时钟 | 地图标记: 充电点被占用 |
| `marker-faulted` | `MarkerFaulted` | 感叹标记 | 地图标记: 充电点报告出错, 不能充电 |
| `marker-out-of-service` | `MarkerOutOfService` | 交叉 | 地图标记: 充电点已退出服务 |
| `marker-unknown` | `MarkerUnknown` | 问号 | 地图标记:充电点的状况未知 |
| `marker-queue` | `MarkerQueue` | 小时镜 | 地图标记: 司机排队充电点,期待等待 |
| `marker-reserved` | `MarkerReserved` | 字母 R | 地图标记: 充电点被保留用于预订 |
| `marker-cluster` | `MarkerCluster` | 空头 | 一组充电点的映射标记; 应用程序绘制头部的计数 |

## 地图标记

第一个 `<path>` 总数 `marker-*` 图标是指针,所以可以将标注填入CSS:指针在你的颜色中,指针用白色表示.

```css
.marker svg > path:first-of-type { fill: currentColor; }
.marker svg > :not(path:first-of-type) { stroke: #fff; }
.marker svg > [fill] { fill: #fff; }
```

使用 `path:first-of-type`没有 `:first-child`: 与 `title`中,该组件构成 `<title>` 作为第一个孩子。 第三条规则使坚固的螺栓 `marker-charging` 白色:从0.7.0起每发闪电都坚固并携带 `fill="currentColor"`。用于绘制图像的地图库(地图Libre) `addImage`见 [存储器中的配方 README](https://github.com/evicons/evicons#map-markers)。 。 。 .

对于集群,使用 `marker-cluster`,空取出指针,并画出其头上的计数;对于被选取的站点,自画出更大的标记(40px而不是32),并有白色的指环,不仅以另一种颜色. 寄存器 README 显示两种, 用于 MapLibre, Leaflet 和 React, 下 [分组和选择](https://github.com/evicons/evicons#clusters-and-selection)。 。 。 .

## 兼容性

|  | 支助 |
| --- | --- |
| 反应 | 18和19(对老年人的依赖) `^18.0.0 || ^19.0.0`(中文(简体) ) |
| 服务器渲染 | 20或以后的节点(测试于20和24日);在React Server组件中工作,否 `'use client'` 需求 |
| 模块格式 | 仅限无害环境管理,不建立共同JS; `require()` 在 Node.js 版本上工作 `require(esm)` (20.19+,22.12+) (中文(简体) ) |
| 类型脚本 | 包括的类型 |

## 许可证

麻省理工学院

## 常见问题

### @evicons/react 是什么？

EVicons 反应 电子移动和EV充电的图标组件

### 如何安装 @evicons/react？

在项目目录运行 npm install @evicons/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @evicons/react 支持 TypeScript 吗？

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

### @evicons/react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @evicons/react 可以商用吗？

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

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

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

### @evicons/react 还在维护吗？

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

