SuperAPI AI 工具集

shopify-polaris-icons

通用与其它

查看项目

更新于 10-16 04:32

技能介绍

用途:为 Shopify 应用提供官方 Polaris 图标库的使用指导,帮助开发者在遵循 Polaris 设计系统的前提下正确选用与呈现图标。

主要能力:介绍 400+ 面向商业场景的图标资源,覆盖导航布局、商品与集合、订单与履约、客户、操作、状态反馈、通讯、设置工具、分析与报表、媒体以及 AI/魔法等分类;说明统一的 {Name}Icon 命名规范;讲解通过 Icon 组件的 tone 属性进行语义化配色(如 success、critical、warning、caution、info、base、subdued、interactive、inherit、magic、emphasis、primary);并给出在 Button、TextField、Banner、Navigation 等 Polaris 组件中配合图标的用法示例。

使用方式:可通过 npm install @shopify/polaris-icons 或 yarn add @shopify/polaris-icons 安装,通常与 @shopify/polaris 一同使用。推荐搭配 Polaris 的 Icon 组件,如 import { Icon } from '@shopify/polaris'; import { PlusCircleIcon } from '@shopify/polaris-icons'; 然后用 <Icon source={PlusCircleIcon} />。图标可放到 Button 的 icon 属性、TextField 的 prefix、Banner 的 icon 以及 Navigation.Section 的 items 中。

适用场景:构建 Shopify 应用前端界面,需要在按钮、导航、表单、提示条等位置使用统一图标时。

限制与注意事项:无文字说明的独立图标必须提供 accessibilityLabel;图标随附描述性文字时视为装饰,无需标注。不要使用非 Polaris 图标,不要用 CSS 手动设置颜色或调整尺寸(图标按 20x20 视口设计),应改用 tone 属性;避免仅为装饰而无语义地使用图标。