奥罗图标库

这个寄存器的重点在于在规模上管理企业在新的Auro设计系统中对图标的需求,并折旧任何遗留项目. 请参见所有辅助文档, 用于此 SVG 图标库的图标 .

安装

$ npm i @alaskaairux/icons

图标类别

图标属于一系列使用类别,其中包括:

收款

除了上面的UI图标外,图书馆还出版更多共享相同构建,优化和版本管道的收藏:

JavaScript 框架支持

在使用其他JavaScript开发框架时,上面的过程可能不会被解析为HTML. 为了解决这一问题,可以使用一些技术.

在npm内部, @alaskaairux/icons/dist/icons/,开发者可以直接进入 SVG 供开发环境消费.

JS SVGs的版本

这种回放输出了两类JS包裹的SVG,以便于与前端框架相融合.

ES5 样式 - 图标Name.js

说明: 用于图标 SVG, ES5 iconName.js 版本已贬值。 请更新新支持的 iconName.mjs 文件类型 。 目前这不适用于SVG标志或尾巴.

module.exports={ ... }

ES6 样式 - 图标Name. mjs

说明: 页:1 iconName_es6.js 文件类型已贬值, 请确定更新所有引用 iconName.mjs。这目前不适用于SVG标志或尾部.

export default { ... }

矩阵

Lit-element要求使用ES6模块导出语法,因此依赖性参考的例子有:

import warning from '@alaskaairux/icons/dist/icons/alert/warning.mjs';

非直接使用

解析 SVG HTML 成为 DOM 需要新自定义元素类范围内的行代码,例如:

constructor() {
  this.dom = new DOMParser().parseFromString(warning.svg, 'text/html');
  this.svg = this.dom.body.firstChild;
}

现在,SVG DOM 被分配到 this.svg 变量,在 HTML 渲染() 模板中渲染此选项可能如下:

<p>${this.svg}</p>

指令使用

在组件文件头部,导入 Lit 元素指令。 。 。 .

// Lit2.0
import { unsafeSVG } from 'lit/directives/unsafe-svg.mjs';

// Legacy Lit Element
import { unsafeSVG } from 'lit-html/directives/unsafe-svg.mjs';

导入您的图标 SVG 引用

import warning from '@alaskaairux/icons/dist/icons/alert/warning.mjs';

在 HTML 模板中使用

<p>${unsafeSVG(warning.svg)}</p>

网络组件

Auro Icons最简单的使用是使用Auro-icon网络组件. 以下 HTML 有属性 API 示例 。 见 奥罗站点 关于使用的细节.

<auro-icon category="" name="" [optional state]>[optional description]</auro-icon>

反应

反应支持与资产链接并在某个组件内使用这些资产的标准.

import warning from '@alaskaairux/icons/dist/icons/alert/warning.svg';

在部分的内 render() 函数,在新变量中传递到 src 属性 <img> 元素将成为资产.

<img src={warning} alt="warning" />

SVG 反应装入器

使用 svg-react-loader 结合网页包,SVG将从指定的资源位置内入.

import warning from '-!svg-react-loader!@alaskaairux/icons/dist/icons/alert/warning.svg';

在部分的内 render() 函数,仅引用通过 svg-react-loader。 。 。 .

<warning />

通过SVG React Loader,用户也可以在SVG内部覆盖属性. 例如,以下代码说明用户如何可以覆盖 role="img" 财务报告和审定财务报表 aria-hidden="true" 属性 :

<warning role="group" aria-hidden="false"/>

说明:eslint支持

上面的语法可能会给您的eslint配置带来问题. 可能出现以下错误:

Unexpected '!' in '-!svg-react-loader?name=Icon!@alaskaairux/icons/dist/icons/alert/warning.svg'. Do not use import syntax to configure webpack loaders

在这种情况下,在本部分中增加以下评论可涉及这一问题:

// eslint-disable-next-line import/no-webpack-loader-syntax
import Arrowdown from '-!svg-react-loader?name=Icon!@alaskaairux/icons/dist/icons/alert/warning.svg';

节点应用程序依赖性

通过一个节点.js的依赖性或者像依赖性管理架构等其他节点,开发者可以从两种不同的情景中选择SVG的渲染. 这一技术将使SVG从指定的资源位置内入.

单个图标请求

建议开发人员列出每个UI组件的个人依赖性,比如:

const arrowDown = require('@alaskaairux/icons/dist/icons/arrowdown');

在UI组件中,开发者可以引用指定给新创建变量的对象,以获得特定图标的SVG代码:

<button>Click Me ${arrowDown.svg}</button>

这将返回图标的 SVG HTML 内含 .

完全依赖图书馆

如果视图中有几个图标,开发者可能选择包含所有可用的图标. 记住随着这个npm的增长,这种依赖性也会增加. 强烈建议依附关系单独申报.

要求完整的图书馆作为UI的附属图书馆,要做到以下几点:

const auroIcons = require('@alaskaairux/icons/dist');

然后在UI组件内,一个开发者可以从输出阵列中渲染出特定的图标,比如:

<button>Click Me ${auroIcons['Arrow Down'].svg}</button>

这将返回图标的 SVG HTML 内含 .

更改 SVG 输出

使用任一方法,SVG被捕获为可以被操纵的对象. 例如,呼叫 arrow-down.js 文件如下所示...

const arrowDown = require('@alaskaairux/icons/dist/icons/arrow-down');

... 将输出以下 HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ico_squareLarge" role="img" style="min-width:var(--auro-size-lg);height:var(--auro-size-lg);fill:currentColor" viewBox="0 0 24 24">
  <title>Directional pointer; down</title>
  <desc/>
  <path d="m11.47 19.78-5.25-5.25a.75.75 0 0 1 .976-1.133l.084.073 3.97 3.97V4.75a.75.75 0 0 1 .648-.743L12 4a.75.75 0 0 1 .743.648l.007.102v12.69l3.97-3.97a.75.75 0 0 1 .976-.073l.084.073a.75.75 0 0 1 .073.976l-.073.084-5.25 5.25a.75.75 0 0 1-.976.073l-.084-.073-5.25-5.25 5.25 5.25Z"/>
</svg>

添加下行的 JavaScript 会找到并更新 aria-hidden 属性 arrowDown.svg 字符串...

arrowDown.svg = arrowDown.svg.replace(/role="img"/g, `role="img" aria-hidden="true"`);

...然后输出如下:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ico_squareLarge" role="img" aria-hidden="true" style="min-width:var(--auro-size-lg);height:var(--auro-size-lg);fill:currentColor" viewBox="0 0 24 24">
  <title>Directional pointer; down</title>
  <desc/>
  <path d="m11.47 19.78-5.25-5.25a.75.75 0 0 1 .976-1.133l.084.073 3.97 3.97V4.75a.75.75 0 0 1 .648-.743L12 4a.75.75 0 0 1 .743.648l.007.102v12.69l3.97-3.97a.75.75 0 0 1 .976-.073l.084.073a.75.75 0 0 1 .073.976l-.073.084-5.25 5.25a.75.75 0 0 1-.976.073l-.084-.073-5.25-5.25 5.25 5.25Z"/>
</svg>

添加新图标

在此寄存器中添加新图标需要几个步骤.

1. 节点.js 最小版本 20.x
2. 添加新图标 .svg 转到 src/icons/ 目录(见下文准则)
3. 如果图标要保留设计的颜色规格,请将新图标放入 src/icons/fullColor 目录
4. 添加 形状方案 改为 ./src/data/icons.json 文件(见下文示例)
5. 提交拉动请求批准

图标形状方案

添加新图标时, 请遵循下面的示例, 将适当的数据添加到 icons.json 文档。 定义于 "commonProperties" 对象可能在单个中被覆盖 "icons" 对象.

每个 SVG 的默认属性

每个 SVG 所需的属性

每个 SVG 可选属性

这个 title 当您想要一个比文件名称简单的名称时,需要属性。 下面的例子数据是: information-stroke.svg名称 information-stroke 如果向浏览器提供,则毫无意义。 将标题更新为 information 将解决这个问题.

示例数据

{
  "commonProperties":
  {
      "role": "img",
      "color": "currentColor",
      "title": "",
      "desc": "",
      "width": "var(--auro-size-lg)",
      "height": "var(--auro-size-lg)",
      "xmlns": "http://www.w3.org/2000/svg",
      "xmlns_xlink": "http://www.w3.org/1999/xlink",
      "viewBox": "0 0 24 24",
      "path": "/icons",
      "style": "ico_squareLarge",
      "type": "icon"
  },
  "icons": [
    {
      "name": "error",
      "title": "Error alert indicator",
      "category": "alert"
    },
    {
      "name": "information-stroke",
      "title": "Important information indicator",
      "category": "alert"
    },
  ]
}

受挫编号: color 财务报告和审定财务报表 width 不使用硬码值。 为了符合要求,您必须使用 Auro Design Token 参考文献 .

测试新图标 SVG 代码

一旦新图标被添加到图标目录并更新了图标数据JSON文件,就运行以下命令.

$ npm run generate
$ npm run serve

当更新完成时, 只需运行 $ npm run generate 生成新系列图标并重建演示页.

发布静态演示页面

部署静态演示页所需的所有资源都在 ./demo 目录.

图标准则

所有新的图标拉取请求 MUST 符合以下规格. 任何不符合这些规格的牵引请求将被视为不符合要求,并将被拒绝.

1. 图标.svg 文件名必须是骆驼笼盖,没有空格、破折号或下划线
2. SVG代码应该成为实现SVG的最小代码

开始

请将 SVG HTML 缩小为仅以下属性 。 构建进程将清除 SVG 文件中任何不想要的属性 .

<svg>
  <g>
    <polygon points="43.9886686 48 24 27.9721836 4.01133144 48 0 44.0611961 19.9886686 23.9666203 0.0679886686 3.93880389 4.14730878 0 24 19.961057 43.8526912 0 47.9320113 3.93880389 27.9433428 23.9666203 48 44.0611961"></polygon>
  </g>
</svg>

别

请不要在 HTML 中包含不必要的规格、 属性、 空格和返回, 因为它们将在构建过程中被清除 。 任何未经手动取出或被取出的东西,都会使svglint测试失败.

1. xml 版本
2. width 或者说 height 硬编码的 HTML 属性
3. 任何自动生成的注释
4. 描述, 除非标题无法描述 SVG 图像/ icon 的用意
5. 任何ID、中风或填充属性,除非 SVG 图像/相机复杂需要

<?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="4px" viewBox="0 0 8 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
    <title>Arrow Down</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Arrow-Down" fill="#0074C8">
            <polygon id="Path" points="4 4 0 0 8 0"></polygon>
        </g>
    </g>
</svg>

谢谢!

这个项目的灵感来自 简单在巨人的肩上,开源项目帮助并激励我们所有人做更好的事!