@ evicons/ 反应

网站: {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}我很高兴见到你

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

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

安装

npm install @evicons/react

使用量

import { PlugType2 } from '@evicons/react'

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

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

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

道具

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

颜色

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

<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 你总是胜过违约.

<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绝对在右下角。 见 存储器中的实例。 。 。 .

图标

连接器

站和站点

电力和能源

车辆

付款

状态

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

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

标记

头部有标志的地图指针(集群指针使其空出一个计数),为24-40 px;见 地图标记 用于填充模式.

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

地图标记

第一个 <path> 总数 marker-* 图标是指针,所以可以将标注填入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。 。 。 .

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

兼容性

许可证

麻省理工学院