SIcon <s-icon>

Polaris icon set से नाम के ज़रिए एक icon दिखाता है। SIcon Shopify के Polaris <s-icon> web component का typed Vue 3 wrapper है।

import { SIcon } from 'polaris-vue-elements'

Best practices

• Icons का इस्तेमाल जानकारी देने के लिए करें, सजावट के लिए नहीं। Icon को यह समझाना चाहिए कि कोई action क्या करता है या कोई state दिखानी चाहिए, जैसे delete action पर delete icon या पूरे हो चुके काम के लिए check। सिर्फ़ दिखावे के लिए icons न जोड़ें।
• एकरूपता रखें। जब कोई icon किसी action या concept का प्रतीक बन जाए, तो अपने पूरे app में उसे वैसा ही रखें। अगर एक जगह edit का मतलब editing है, तो हर जगह editing के लिए उसी का इस्तेमाल करें।
• जहाँ संभव हो, icons के साथ text रखें। अकेले होने पर जाने-पहचाने icons के भी एक से ज़्यादा मतलब निकाले जा सकते हैं। अकेला icon सिर्फ़ वहीं इस्तेमाल करें जहाँ जगह कम हो, जैसे accessibilityLabel वाला सिर्फ़ icon वाला button।
• व्यापक रूप से पहचाने जाने वाले icons चुनें। तय अर्थ वाले icons को प्राथमिकता दें, जैसे search, delete और plus। अगर किसी icon को समझाने की ज़रूरत पड़े, तो कोई दूसरा चुनें।
• tone से अर्थ व्यक्त करें। Destructive actions के लिए tone="critical", सकारात्मक states के लिए tone="success" और सावधानी के लिए tone="warning" इस्तेमाल करें। Tones को कुछ बताना चाहिए, सजावट नहीं करनी चाहिए।

<SIcon type="alert-triangle" tone="warning" />

सभी सुझावों के लिए <s-icon> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

<script setup>
import { SIcon } from 'polaris-vue-elements'
</script>

<template>
  <!-- `type` accepts a large named-icon union; a few examples below. See
       src/lib/generated/types.ts for the full list. -->
  <SIcon type="star" />
  <SIcon type="cart" tone="info" />
  <SIcon type="check-circle" tone="success" />
  <SIcon type="alert-triangle" tone="warning" />
  <SIcon type="delete" tone="critical" />
  <SIcon type="settings" size="small" color="subdued" />
</template>

Props

Prop	Type	विवरण
color	"subdued" | "base"	color emphasis level, जो visual intensity नियंत्रित करता है। - base: body text, सामान्य UI elements और अच्छी readability वाले सामान्य content के लिए primary color। - subdued: secondary text, सहायक labels और कम महत्वपूर्ण interface elements के लिए कम ज़ोर वाला color।
interestFor	string	उस component की ID जिसे इस component पर interest (जैसे hover और focus) पर प्रतिक्रिया देनी चाहिए।
size	"base" | "small"	icon का आकार। - small: text के अंदर inline उपयोग या compact UI elements के लिए उपयुक्त छोटा icon। - base: डिफ़ॉल्ट आकार जो standalone icons और सामान्य उपयोगों के लिए अच्छा काम करता है।
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	component का semantic अर्थ और color treatment। - info: जानकारी देने वाली सामग्री या उपयोगी सुझाव। - success: सकारात्मक परिणाम या सफल states। - warning: संभावित समस्याओं के बारे में महत्वपूर्ण चेतावनियाँ। - critical: तत्काल समस्याएँ या destructive actions। - auto: context के आधार पर अपने आप तय होता है। - neutral: बिना किसी विशेष उद्देश्य की सामान्य जानकारी। - caution: सलाह देने वाली सूचनाएँ जिन पर ध्यान देना ज़रूरी है।
type	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	icon library से दिखाया जाने वाला icon। वह icon दिखाने के लिए एक मान्य icon name सेट करें। icon को पूरी तरह छिपाने के लिए खाली string '' का उपयोग करें। icon दिखाए बिना उसकी जगह सुरक्षित रखने के लिए 'empty' का उपयोग करें।

पढ़ने में आसानी के लिए ऊपर के कुछ type columns छोटे किए गए हैं; पूरा union library के generate किए गए TypeScript types (src/lib/generated/types.ts) में उपलब्ध है।