全局样式

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

我们推荐使用 CSS 设置全局样式，因为这是最直接的方式。 但如果使用 CSS，单个图标上的 size、color 和 strokeWidth 等 props 可能会被 CSS 优先级覆盖。若你仍希望单独图标可以继续通过 props 调整样式，可以使用 YCloud context provider。

上下文 Provider

如果要通过 context provider 设置全局样式，可以使用 @ycloud-web/icons-react 包提供的 YCloudIconsProvider 组件。

import { YCloudIconsProvider, Home } from '@ycloud-web/icons-react';

const App = () => (
  <YCloudIconsProvider
    color="red"
    size={48}
    strokeWidth={2}
  >
    <Home />
  </YCloudIconsProvider>
);

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

使用 CSS 设置样式

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

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

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

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

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

Open Sandbox

固定描边宽度

如果要设置全局固定描边宽度，可以给子元素应用 vector-effect: non-scaling-stroke CSS 属性。无论图标尺寸如何变化，它都会让描边宽度保持一致。更多信息见固定描边宽度。

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

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

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

Open Sandbox