跳到内容 Shopify标志 北极星

图标

图标用于直观地传达产品的核心部分和可用的操作。它们可以作为寻路工具，帮助商家更容易地了解他们在产品中的位置，以及可用的常见交互模式。

用于可视化地传达产品的核心部分和可用的操作。

进口{图标｝从“@shopify /北极星”；进口{CirclePlusMinor｝从“@shopify / polaris-icons”；进口反应从“反应”；函数IconExample（）{返回<图标的源＝{CirclePlusMinor｝/>；｝

道具

想要帮助完善这个功能吗?请分享你的反馈．

接口 IconProps
源 任何

要在图标中显示的SVG内容(图标应该适合20 × 20像素的viewBox)。
颜色? “基地”|“低调”|“关键”|“互动”|“警告”|“亮点”|“成功”|“主”

设置SVG填充的颜色。
背景? 布尔

显示图标后面的背景。
accessibilityLabel? 字符串

要读给屏幕阅读器的描述性文本。

可访问性

使用图标可以极大地帮助那些在阅读、语言、注意力和低视力方面有困难的商人。

如果图标显示时没有文本，则使用accessibilityLabel道具给图标一个文本选项。这将添加一个aria-label这传达给了屏幕阅读器用户。

做

  • 对文本和图标的清晰度
  • 如果图标的目的不能以另一种方式传达，就给它一个对等的文本
  • 回顾我们的替代文本确保你的图标适用于所有商家的指导方针
             

              

               

                

                 例子

               

               

                
               

              

              
<图标的源＝{OrdersMajor｝/><p>还没有订单</p>

             
             

              

               

                

                 例子

               

               

                
               

              

              
<按钮图标＝{CirclePlusMinor｝>添加产品</按钮>

不

  • 描述图标的样子
  • 在文本中包含“icon”
  • 复制替代文本中的相邻文本
  • 以编程方式提供的重复信息
             

              

               

                

                 例子

               

               

                
               

              

              
<图标的源＝{CirclePlusMinor｝accessibilityLabel＝“圆圈+图标”/>