跳到内容

全局样式

图标可以通过 颜色尺寸描边宽度 进行调整。 你可以使用 CSS 统一设置所有图标的全局样式。

使用 CSS 设置样式

使用 CSS 设置图标样式很简单。

每个图标都会带有名为 ycloud 的 class。你可以在 CSS 文件中通过这个 class 选中应用内使用的所有图标。

  • 图标的颜色可以通过 color CSS 属性修改。
  • 图标的尺寸可以通过 widthheight CSS 属性修改。
  • 图标的描边宽度可以通过 stroke-width CSS 属性修改。
css
.ycloud {
  color: #ffadff;
  width: 56px;
  height: 56px;
  stroke-width: 1px;
}

固定描边宽度

如需全局固定描边宽度,可以给图标的子元素应用 vector-effect: non-scaling-stroke CSS 属性。这样无论图标尺寸如何变化,描边宽度都会保持不变。更多信息请参考固定描边宽度

css
.ycloud {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
}

.ycloud * {
  vector-effect: non-scaling-stroke;
}

基于 ISC 许可证发布。