@ equinor/ eds- icons (英语)

此套件是收藏 system icons 从Equinor设计系统作为javascript对象.

安装

npm install @equinor/eds-icons

如果使用 Typescript,请确保您有 Typescript QQ 3.8 作为 devDependency :

npm install typescript --save-dev

使用量

导入 svg 数据 :

import { save } from "@equinor/eds-icons"

反应

我们开发了一个反应组件来简化EDS图标库在反应中的使用.

import { Icon } from '@equinor/eds-core-react'
import { save } from '@equinor/eds-icons'

// Use library approach 
Icon.add({ save }) // (this needs only be done once)
<Icon name="save" />

// OR 

// Use directly via data prop:
<Icon data={save} />

其他网络框架

您可以使用平面渲染 EDS 图标 常规。 。 。 .

由于 Figma 如何解析和导出 svg 图标, 您必须添加以下属性 : <path> 元素; fill-rule="evenodd" clip-rule="evenodd"。 。 。 .

由于每个图标都需要捆绑大小,因此不包括这些大小.

import { save } from '@equinor/eds-icons'

<svg viewBox={`0 0 ${save.width} ${save.height}`}>
  <path d={save.svgPathData} fill-rule="evenodd" clip-rule="evenodd">
</svg>

图标名称

使用 EDS 法格玛资产(Equinor Figma账户需要) 或我们的 图标预览 图标名称。 图标名称中的空格被下划线所取代.

star-filled -> star_filled。 。 。 .

图标数据示例

{
  name: 'star_filled',
  prefix: 'eds',
  height: '24',
  width: '24',
  svgPathData: 'M12 16.067l4.947 3.6-1.894-5.814L20 10.334h-6.067l-1.933-6-1.933 6H4l4.947 3.52-1.894 5.814 4.947-3.6z',
}

财务问题

• 如果您正在使用NodeJS 13+来加载模块,它现在有本地的ES模块支持. 添加 "type":"module" 给您的应用程序 package.json 以启用此功能.

• 如果您尝试导入 ES 模块时遇到语法错误, 请尝试导入 CJS 模块, 因为并非所有加载器都支持 ES 模块

贷项

EDS系统图标以复制件为基础 大纲材料设计 图标由Google提供开源。 这些图标已经定制并重新命名为Equinor使用.