anticon

Ant Design的图标组件，提供了一套丰富的图标供开发者使用。

基本样式

anticon类用于显示图标，它的CSS样式包括：

  • display: inline-block;:将元素设置为内联块级元素，使其可以与其他元素在同一行显示。
  • color: inherit;:将颜色设置为继承父元素的颜色。
  • font-style: normal;:将字体样式设置为正常。
  • line-height: 0;:将行高设置为0。
  • text-align: center;:将文本内容居中显示。
  • text-transform: none;:将文本转换设置为无。
  • vertical-align: -0.125em;:将垂直对齐设置为负的0.125倍的字体大小。
  • text-rendering: optimizeLegibility;:优化文本渲染质量。
  • -webkit-font-smoothing: antialiased;:使用抗锯齿技术平滑字体边缘。
  • -moz-osx-font-smoothing: grayscale;:在Mac OS X系统下使用灰度字体平滑技术。

SVG图标

.anticon svg类用于显示SVG图标，它将SVG元素设置为内联块级元素，并自动调整其大小以适应其内容。

在其他元素前添加图标

.anticon::before伪元素用于在.anticon类的元素前添加图标，它的CSS样式包括：

  • display: none;:将伪元素隐藏。
  • .anticon-icon选择器用于选中.anticon类下的<span>元素，将其显示为块级元素。

为图标添加可点击事件

.anticon[tabindex]选择器用于选中具有tabindex属性的图标，使其可以被聚焦和操作。它的CSS样式包括：cursor: pointer;,将鼠标指针设置为手指形状。