符号
157个即时插图作为Lit网络组件,用于空状态,状态面板,登机,商务,安全和出错等页面: <c2-symbol-empty-inbox>, (中文(简体) ), <c2-symbol-no-results>, (中文(简体) ), <c2-symbol-success>还有更多.
艺术作品是用一个160x160的网格绘制的(麻省理工学院,像其他寄存器一样),其中的每一种颜色都出自一组小可主题角色,因此一个主题一并重现整个组合,暗模式通过 @c2n/theme。 。 。 .
安装
npm install @c2n/symbols
使用量
只导入您使用的符号 :
import '@c2n/symbols/symbols/empty-inbox.js'
<c2-symbol-empty-inbox></c2-symbol-empty-inbox>
或者登记整个集:
import '@c2n/symbols'
符号默认为装饰 (aria-hidden) (中文(简体) ). 给它 label 当它意味着没有附近的文本重复:
<c2-symbol-offline label="You are offline"></c2-symbol-offline>
符号名称、目录(标题、类别、描述)、标签助手和 SymbolElement 从软件包根导出基类.
在状态面板中
<c2-status-panel media="illustration" heading="No results" description="Try a different keyword or clear the filters.">
<c2-symbol-no-results slot="media"></c2-symbol-no-results>
</c2-status-panel>
他们
| 财产 | 默认 | 作用 |
|---|---|---|
--c2-symbol--size | 120px | 宽度和高度 |
--c2-symbol--stroke-width | 3 | 160×160帆布上的轮廓宽度 |
--c2-symbol__backdrop--color | #f4f4f5 | 艺术品后面的软盘 |
--c2-symbol__surface--color | #ffffff | 物体的相貌, 在彩色形状上绘制的标记 |
--c2-symbol__muted--color | #e4e4e7 | 二级填料,地面阴影 |
--c2-symbol__line--color | #a1a1aa | 默认大纲 |
--c2-symbol__ink--color | #71717a | 细小的固体细节 |
--c2-symbol__primary--color | #0265dc | 百分点 |
--c2-symbol__primary-soft--color | #edf1fe | 轻口音填充 |
--c2-symbol__accent--color | #fbbf24 | 黄金亮点: 星星、硬币、灯泡、相片 |
--c2-symbol__success--color | #16a34a | 成功标志 |
--c2-symbol__warning--color | #f59e0b | 警徽和危险标志 |
--c2-symbol__error--color | #dc2626 | 错误的徽章和击穿 |
设定 --c2-symbol__backdrop--color: transparent 把盘子放下.
正在添加或编辑一个符号
构成部分 src/symbols/ 产生并致力于。 来源是 svg/<name>.svg 加进一个条目 svg/catalog.json (标题,类别-) empty, (中文(简体) ), status, (中文(简体) ), error, (中文(简体) ), security, (中文(简体) ), commerce, (中文(简体) ), communication, (中文(简体) ), files 或者说 onboarding ——和说明)。 源头必须使用精确的包装 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160"> 从一个班级取出每种颜色:充活的角色backdrop, (中文(简体) ), surface, (中文(简体) ), muted, (中文(简体) ), ink, (中文(简体) ), primary, (中文(简体) ), primary-soft, (中文(简体) ), accent, (中文(简体) ), success, (中文(简体) ), warning, (中文(简体) ), error),默认大纲 line,或彩色中风 line-<role>。生成器拒绝 fill, (中文(简体) ), stroke, (中文(简体) ), style 还有其他的班级 然后运行 :
npm run generate -w packages/icons/symbols
npm run build -w packages/icons/symbols