简单 UI 图标
Easy UI 图标是一个包,包含经验可以用来在 EasyPost 平台上建构的图标,并在其中包含 SVG 文件 svg 目录.
简单UI 图标一般使用 材料符号。 。 。 .
Set: Material Symbols
Style: Outlined
Fill: 0
Weight: 300
Grade: Normal
Size: 48dp
开始
虽然可以直接使用此软件包,但我们建议通过 简单 UI 反应 结合 Icon 组件.
安装
使用量
导入 Icon 组件来自 Easy UI React 和 Easy UI 图标中的任意图标.
-
从 Easy UI React 导入图标组件 :
import Icon from "@easypost/easy-ui/Icon"; -
从 Easy UI 图标导入图标 :
import CheckCircleIcon from "@easypost/easy-ui-icons/CheckCircle"; -
将导入的 Easy UI 图标传递到
symbol页:1Icon组件 :<Icon symbol={CheckCircleIcon} />
如上所示,进口的图标将假定重量为300个。 要导入有不同重量的图标,请将重量作为后缀添加到路径中.
import Icon400 from "@easypost/easy-ui/Icon400";
SVG 文件
对于不使用 React 且需要原始 SVG 的工程,图标可用为 *.svg 文档中 svg 文件夹.
import svgFile from "@easypost/easy-ui-icons/svg/Info.svg";
发展
图标
| 命令 | 运行 |
|---|---|
npm run build | 构建图标工程 |
npm run clean | 删除临时目录 |
npm run dev | 在文件更改上构建图标工程 |
添加图标
添加图标到 src/ 文件夹。 简单UI图标支持自定义的SVG文件和JSON文件引用材料符号配置.
所有图标 src/ 转录到 React 组件,再以建构的原始SVG再导出.
材料符号
通过指定一个具有材料符号配置的命名为JSON的文件来添加一个新的材料符号图标.
Check.json数字 :
{
"name": "check",
"style": "outlined",
"source": "@material-symbols/svg-300"
}
要添加一个新的有300个外重的材料符号图标,请将以上内容更新为这样反映;以400个相重为例:
Check400.json数字 :
{
"name": "check",
"style": "outlined",
"source": "@material-symbols/svg-400"
}