@cockroachlabs/相册
包含 Cockroach 实验室图标作为 SVG 供其他组件消费的软件包
这个软件包作为SVG图标的存储器,这些图标被转换并作为React组件发布.
使用量
虽然此软件包收藏中的任何图标都可以单独导入, 在实践中,用于Cockroach Labs应用中 ui组件 ,为预定的图标用途(大小和填充)提供类型。 见 下级 用于实例.
import { Time } from "@cockroachlabs/icons";
const TimeButton = ({ timestamp }) => (
<button>
<Time /> {timestamp}
</button>
);
import * as Icons from "@cockroachlabs/icons";
// ...
<EditMessage icon={Icons.Pencil} />;
每个图标组件将构成一个 <svg /> 未绑定大小且可能没有默认填充颜色的元素。 这些属性可以作为 props。 。 。 .
import { CheckCircleFilled } from "@cockroachlabs/icons";
<CheckCircleFilled fill="green" height="24px" width="24px" />
// or
<CheckCircleFilled style={{ fill: "green", height: "24px", width: "24px" }} />
图标集和组件
具有共同属性的图标被组合到一个导出收藏中,并一般具有关联性 组件 从集中生成图标。 出口的套装是,
- 系统图标 - 用作共同行动和命令的可视化表现,以提供更多的背景和提高可用性。 这些图标必要时可以扩大或缩小规模. 它们只应作一色.
- 图像 - 象形图图标包含1个以上的颜色值,其大小大于系统图标. 它们被用来在有空间的UI中增加个性,视觉兴趣和品牌.
- 第三方图标 - 曾经代表 3 党徽在UI。 这些图标必要时可以扩大或缩小规模,并继承了第3个党的品牌颜色.
- 信用卡 ——信用卡图标用于代表信用卡品牌. 它们可以升降,并且可以由我们的设计系统调色板以外的颜色组成.
- 旗帜 - 旗帜图标用来代表一个区域或国家。 它们可以升降,并且可以由我们的设计系统调色板以外的颜色组成.
- 说明 - 说明是大规模使用的,一般在空州或404页等空间很多的地区使用。 它们在UI中增加了个性,视觉兴趣和品牌.
这些组合可以使用其相关组件来渲染,
import { Icon, Pictogram, ThirdPartyIcon, CreditCard, Flag, Illustration } from "@cockroachlabs/ui-components";
/*
...snip
*/
<Icon iconName="Gear" size="small" fill="info" />
<Pictogram pictogramName="Email" size="medium" />
<ThirdParty iconName="Gcp" size="large" />
{/* Flag icons can be referenced by "flagName" or "countryCode" prop */}
<Flag flagName="Canada" size="medium" />
<Flag countryCode="can" size="small" />
<CreditCard creditCardName="Visa" size="tiny" />
<Illustration illustrationName="SleepMoon" />
SVG道具通过
使图标都延伸的组件 SVGElement 道具和任何组件都可以 常见的 HTML 元素属性。例如,
<Icon iconName="Pencil" size="small" className="edit-icon" aria-label="Edit field icon" id="edit-icon">
我如何贡献出新的图标?
见 捐款额 用于说明添加新图标和发布新版本图标包.