@aquera/nile-glyph (英语)
尼罗河设计系统的图标组件和glyph数据.
安装
npm install @aquera/nile-glyph
# or
yarn add @aquera/nile-glyph
使用量
基本用途
导入和使用 <nile-glyph> 网络组件 :
<nile-glyph name="alert"></nile-glyph>
组件自登记器作为自定义元素导入时:
import '@aquera/nile-glyph';
属性
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
name | string | —— 说 | 要显示的图标名称 |
set | string | 'local' | 要使用的图标集 |
size | number | 16 | 像素图标大小 |
color | string | —— 说 | 图标填充颜色 |
method | string | 'fill' | 渲染方法'fill' 或者说 'stroke'(中文(简体) ) |
description | string | '' | 图标的可访问描述 |
push | boolean | false | 添加正边距 |
noFill | boolean | false | 防止填充到路径中 |
frame | string | —— 说 | 自定义视图框尺寸 |
customSvgPath | string | —— 说 | 要装入的自定义 SVG 文件的 URL |
实例
<!-- Icon with custom size and color -->
<nile-glyph name="alert" size="24" color="#ff0000"></nile-glyph>
<!-- Stroke-based icon -->
<nile-glyph name="calendar" method="stroke"></nile-glyph>
<!-- Icon with accessible description -->
<nile-glyph name="close" description="Close dialog"></nile-glyph>
<!-- Custom SVG from URL -->
<nile-glyph customSvgPath="/assets/my-icon.svg"></nile-glyph>
CSS 自定义属性
| 财产 | 说明 |
|---|---|
--nile-svg-height | 图标高度 |
--nile-svg-width | 图标宽度 |
--nile-svg-fill | 图标填充颜色 |
--nile-svg-stroke | 图标中转颜色 |
--nile-svg-stroke-width | 图标中风宽度 |
--nile-spacing-lg | 按下比值间隔 |
程序导入
// Import the component class
import { NileGlyph } from '@aquera/nile-glyph';
// Import individual icon SVG data
import * as Icons from '@aquera/nile-glyph/icons';
// Import the alias map
import { aliasMap } from '@aquera/nile-glyph';
出口
| 入口 | 说明 |
|---|---|
@aquera/nile-glyph | 主要条目 - NileGlyph, (中文(简体) ), aliasMap, (中文(简体) ), Icons |
@aquera/nile-glyph/icons | 个人图标 SVG 数据( Base64) |
@aquera/nile-glyph/nile-glyph | NileGlyph 仅包含 |
发展
此还原( T)aquerateam/nile-glyph-registry(b) 将一揽子措施置于其根基
石膏摄入量 黑瓶 (尼尔曼) bot/两者都从
aquerateam/design-system 2026年10月27日,历史已包含在内.
yarn install --frozen-lockfile
yarn build # runs prebuild: icon files + tokens from assets/source/*.svg
yarn package # CDN bundle (dist/index.js)
yarn test
- 新图标进入
assets/source/作为 SVG, 通常通过bot: 上传到 黑打开一个glyph/*分支,其管道会构建图标文件,使 补丁版本并添加下面的放出注释条目. - 版本更改合并到
master发布到 npm 和ui-cdn.dev.aqueralabs.com/nile-glyph/<version>/A级release/*分支出版到/nile-glyph/release/。 。 。 . - 机器人只能通过自定义管道部署
foundation-builder-deploy(见bot/deploy/) (中文(简体) ).
发布注释
您可以在本节中找到每次发布时的更新 @aquera/nile-glyph. 保持详细的发行注释,帮助用户和开发者了解从一个版本到另一个版本的更改以及这些更改会如何影响他们的项目,这是一个好的做法.
1.0.13版本(2026年10月30日)
- 尼罗河格莱弗: 已添加的新 NxtGen 图标 -
ng-bar-chart-error(单位:千美元)
1.0.12版本(2026年10月28日)
- 尼罗河格莱弗: 已添加的新 NxtGen 图标 -
ng-hurricane-01(单位:千美元)
1.0.11版(2026年10月28日) 页面存档备份,存于互联网档案馆
- 尼罗河格莱弗: 已添加的新 NxtGen 图标 -
ng-gift-02(单位:千美元)
1.0.10版(2026年10月27日) 页面存档备份,存于互联网档案馆
- 尼罗河格莱弗: 已添加的新 NxtGen 图标 -
ng-star-04(单位:千美元)
1.0.9版本(2026年10月23日)
- 尼罗河格莱弗: 已添加的新 NxtGen 图标 -
ng-array-integer(IF-1394) (中文(简体) ) - 尼罗河格莱弗: 已添加的新 NxtGen 图标 -
ng-array-objects(IF-1394) (中文(简体) ) - 尼罗河格莱弗: 已添加的新 NxtGen 图标 -
ng-array-strings(IF-1394) (中文(简体) )
1.0.8版本(2026年10月05日)
- Nile Glyph: 添加了 1 新 NxtGen 图标 -
ng-ai-prompt(金融情报室-1376)
1.0.7版(2026年6月30日) 页面存档备份,存于互联网档案馆
- Nile Glyph: 添加了 2 新 NxtGen 图标(UIF-1283)
1.0.6版(2026年6月01日)
- 尼罗河石:添加了3个新NxtGen图标(UIF-1248)
1.0.5版本(2026年5月29日)
- 尼罗河石:添加了21个新NxtGen图标(UIF-1244)
1.0.4版本(2026年5月28日)
- 尼罗河石:添加了21个新NxtGen图标(UIF-1241)
1.0.3版本(2026年4月27日)
- 尼罗河石:添加了21个新NxtGen图标(UIF-1202)
1.02版本(2026年4月15日)
- Nile Glyph: 添加了 Sql 服务器并打开了搜索 Glyph (UIF-1183)
1.0.1版本(2026年4月07日)
- 尼罗河格莱克:添加了彩色格莱克(UIF-1175)
1.0.0版本(2026年3月26日)
- 创建了尼罗河水晶组件.
- 2200+ Glyphs (Icons) 可用出盒.