@autoguru/icons (英语)
AutoGuru支持产品的图标和插图.
一个可树动的反相图标库,将自动Guru 图标和 磷酸盐 图标设置,镜像 AutoGuru 设计 系统 每个图标都是单个组件,所以您只运送您导入的东西.
- 1500+ 图标 纵横 20个职类 ——见: 类别参考
- 树能震动 —— 说
sideEffects: false,每个图标一个组件 - 可主题 ——图标继承颜色通过
currentColor缩放到任意大小 - 类型 – 舰船 TypeScript 定义每个图标
安装
yarn add @autoguru/icons react
react (qqq16.8)是同级依赖.
使用量
图标是反应组件。 让他们通过
Icon 构成部分从
@autoguru/overdrive数字 :
import { UserSquareIcon } from '@autoguru/icons';
import { Icon } from '@autoguru/overdrive';
<Icon icon={UserSquareIcon} size={16} />;
或直接渲染——图标 currentColor,所以颜色和大小是
由集装箱控制:
import { CarIcon } from '@autoguru/icons';
<span style={{ color: 'tomato', width: 24, height: 24, display: 'inline-flex' }}>
<CarIcon />
</span>;
命名
每个图标导出为 PascalCase + 键 Icon,来源于其kebab- case
源文件名 :
| 来源 SVG | 导出 |
|---|---|
arrow-left.svg | ArrowLeftIcon |
user-square.svg | UserSquareIcon |
magnifying-glass.svg | MagnifyingGlassIcon |
类别
全体 1 577个图标 归入 20个职类打开 类别参考 用于完整插图索引(每个图标) ,带有预览及其导出名称),或直跳到一个类别:
| 类别 | 图标 | 类别 | 图标 |
|---|---|---|---|
| 自动Guru | 第45条 | 已填充 | 第9条 |
| 箭头 | 121国道 | 品牌 | 第89条 |
| 商业 | 页:1 | 通讯 | 73国 |
| 设计 | 133国 | 发展 | 29个 |
| 学历 | 第 19 条 | 游戏 | 73国 |
| 健康与健康 | 27个 | 地图和旅行 | 99 (韩语) |
| 数学和财务 | 83个 | 媒体 | 页:1 |
| 办公室编辑( E) | 131个 | 人员 | 第69条 |
| 安全警告( W) | 第44条 | 系统设备( D) | 156 (中文(简体) ) |
| 时间 | 第28条 | 天气与自然 | 第62条 |
查找图标
- 浏览 类别参考 或搜索 phosphoricons.com (美国英语)。 。 。 .
- Phospor 图标
arrow-square-out在此导出为ArrowSquareOutIcon。 。 。 .
捐款
添加图标
-
将优化的 SVG 降入
icons/带有 kebab 文件名 (例如:.car-key.svg) (中文(简体) ). 文件名成为导出名称 -car-key.svg→CarKeyIcon。 。 。 . -
保持源头的清洁:一个
viewBox, (中文(简体) ),currentColor黑色填满,none中风,没有内线width编号 :heightSVG通过svgo在建造期间, 但我们也想要源头清理. -
将图标的分类添加到
categories/categories.json(单位:千美元)"car-key": "AutoGuru"),然后刷新引用:node categories/generate.js # regenerates the category reference -
运行
yarn build。 。 。 .
基础图标集来源于 磷酸盐
(正常重量)加上讲解AutoGuru设计;这些SVG现在直接生活在
icons/因此不存在外部图标依赖性.
大楼
yarn generate # SVGs -> React components + index.ts
yarn build # generate, then compile CJS + ESM + type definitions
scripts/build.js 将 SVG 变成组件并生成 index.ts。 。 。 .
这个 categories/ 参考文件是单独的独立文档
生产 categories/generate.js 从 categories/categories.json - 没错
不在构建和软件包中输出分类元数据.
许可证
麻省理工学院 自动Guru
