全局样式

图标可以通过颜色、尺寸和描边宽度进行调整。如果要为所有图标设置全局样式，可以使用 CSS，也可以使用 createIcons 的 attrs 选项。

我们推荐使用 CSS 设置全局样式，因为这是最直接的方式。

这会把 color、size 和 strokeWidth props 应用到所有图标。

通过 `createIcons` 的 attrs 设置样式

你也可以通过向 createIcons 函数传入 attributes 来应用全局样式。

<!doctype html>
<html>
  <body>
    <i data-ycloud="building"></i>

    <script src="index.js"></script>
  </body>
</html>

Open Sandbox

使用 CSS 设置样式

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

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

图标的颜色可以通过 color CSS 属性修改。
图标的尺寸可以通过 width 和 height CSS 属性修改。
图标的描边宽度可以通过 stroke-width CSS 属性修改。

.ycloud {
  /* 修改这里 */
  color: #ffadff;
  width: 48px;
  height: 48px;
  stroke-width: 1px;
}

.app {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 6px;
}

Open Sandbox

全局样式 ​

通过 createIcons 的 attrs 设置样式 ​

使用 CSS 设置样式 ​

全局样式

通过 `createIcons` 的 attrs 设置样式

使用 CSS 设置样式