@adapt-design-system/icons 中文文档教程
ADAPT DS Icons
这个包基本上采用一个 svg 图标文件夹，并将它们转换为导出的 React 组件。
Import and use
import { IconEmail } from '@adapt-design-system/icons';
<Text fontSize="small">
Inbox <IconEmail />
</Text>;
Set size and color
默认情况下，图标设计为继承其父级的 fontSize 和 color。 这是为了服务于通常情况下，图标用于伴随文本，并且通常应与文本具有相同的大小和颜色。
将样式值传递给 customStyle 属性以添加新属性/覆盖默认值。
注意：默认情况下，图标的大小设置为 1.1em，因为图标通常比其伴随的文本稍大时看起来更好。 要覆盖它，您可以执行以下操作：
<IconEmail customStyle={{width: '1em', height: '1em' }} />
Why is there a negative top margin on the icons?
这是为了创建与文本更好的视觉对齐。
要删除它，
<IconEmail customStyle={{marginTop: 0 }} />
Adding New Icons
如果设计团队已将新图标添加到 Figma 库，您应该让他们将这些图标的 SVG 导出为 24x24 svg，并将这些文件放在 icons 目录中。 请注意，react 组件名称将从文件名生成：
activity-fill.svg ->
Publishing a new version to npm
要发布新版本运行 yarn publish-package。 如果你引入了一个破坏性的变化，提升主要版本（2.0.3 -> 3.0.0）。 如果您添加新的（非破坏性的）功能，则会增加次要版本（2.0.3 -> 2.1.0）。 否则在添加新图标时会遇到补丁 (2.0.3 -> 2.0.4)。 系统会要求您提供新版本。
⚠️ Important!
不要忘记升级使用包，在本例中为 /docs，以使用新版本。 像这样： 纱线升级@adapt-design-system/icons@^2.0.4
ADAPT DS Icons
This package basically takes a folder of svg icons and converts them to exported React components.
Import and use
import { IconEmail } from '@adapt-design-system/icons';
<Text fontSize="small">
Inbox <IconEmail />
</Text>;
Set size and color
By default, the icons are designed to inherit the fontSize and color of their parent. This is to serve the usual case where an icon is used to accompany text and it should generally be the same size and color as the text.
Pass style values to the customStyle prop to add new properties / override the defaults.
Note: The size of the icons is set to 1.1em by default, as generally icons look better when they're slightly larger than their accompanying text. To override this, you can do the following:
<IconEmail customStyle={{width: '1em', height: '1em' }} />
Why is there a negative top margin on the icons?
This is to create a better visual alignment with the text.
To remove it,
<IconEmail customStyle={{marginTop: 0 }} />
Adding New Icons
If the design team have added new icons to the Figma library, you should get them to export SVGs of those icons as 24x24 svgs and drop those files in the icons directory. Note that the react component name will be generated from the filename:
activity-fill.svg -> <IconActivityFill />
Publishing a new version to npm
To publish a new version run yarn publish-package. If you introduce a breaking change, bump the major version (2.0.3 -> 3.0.0). If you add new (non-breaking) functionality bump the minor version (2.0.3 -> 2.1.0). Otherwise bump patch when adding new icons (2.0.3 -> 2.0.4). You will be asked for a new version.
⚠️ Important!
Don't forget to upgrade the consuming packages, in this case /docs, to make use of the new version. Like so: yarn upgrade @adapt-design-system/icons@^2.0.4
