आइकन
हर डिज़ाइन सिस्टम का एक आइकन सेट, एक वेट, और एक नियम — चयनित न हो तो आउटलाइन वाला, चयनित हो तो भरा हुआ।
Tanrei के डिफ़ॉल्ट आइकन Material Symbols हैं, Rounded शैली में, वेट 300 पर। टेक्स्ट के टाइपफ़ेस की तरह इस फ़ॉन्ट का भी सिर्फ़ नाम से रेफ़रेंस लिया जाता है, इसे साथ में नहीं दिया जाता: इसे प्रॉडक्ट लोड करता है।
आइकन कैसे बनता है, यह टोकन का एक छोटा ग्रुप तय करता है। आइकन बॉक्स तीन साइज़ में आता है, sys.icon.small, medium और large (डिफ़ॉल्ट रूप से 16, 20 और 24px), और फ़ॉन्ट का ऑप्टिकल साइज़ बॉक्स के अनुसार चलता है।
ref.typeface.icon- The icon font. Material Symbols Rounded: a variable font whose weight and fill are set from sys.icon.
sys.icon.family- The icon font by selection. A variable icon font (Material Symbols) is one family and tells selected from unselected with its FILL axis; a static icon font tells them apart with two families (Material Icons Outlined / Material Icons). Both default to ref.typeface.icon.
sys.icon.weight- The stroke weight of every icon (the `wght` axis of the icon font).
sys.icon.fill- The fill of an icon by selection (the `FILL` axis of the icon font): 0 is outlined, 1 is filled.
इससे जनरेट किया गया: tokens/ref/typeface.tokens.json, tokens/sys/measure.tokens.json
चयनित नहीं है तो आउटलाइन। चयनित है तो भरा हुआ। हमेशा। नेविगेशन आइटम, टैब, टॉगल, चिप, पसंदीदा: आइकन वही ग्लिफ़ रहता है और स्टेट के साथ सिर्फ़ उसका फ़िल बदलता है। भरे हुए और आउटलाइन वाले आइकन सजावट के लिए कभी मिलाए नहीं जाते, और कभी हाथ से चुने नहीं जाते — वेब पर फ़िल उस कंट्रोल के स्टेट के अनुसार चलता है जिसमें आइकन रखा है।
फ़िल चयन के अनुसार चलता है
import '@tanrei/web/icons.css';<button aria-pressed="true"><span class="tanrei-icon" aria-hidden="true">favorite</span> पसंदीदा</button>.tanrei-icon किसी भी पूर्वज एलिमेंट पर aria-pressed, aria-selected, aria-checked और aria-current पढ़ता है (Tanrei कंट्रोल इन्हें data-aria-* पर ले जाते हैं, इसलिए उन पर यह data-aria-pressed, data-aria-selected, data-aria-checked और data-aria-current पढ़ता है), या आइकन अथवा किसी पूर्वज पर data-selected (data-selected="false" किसी एक आइकन को इससे बाहर रखता है)। जब आइकन के पास का टेक्स्ट वही बात कहता हो, तो आइकन को aria-hidden="true" दें, और जब न कहता हो, तो कंट्रोल को एक्सेसिबल नाम दें।
नाम data-icon में भी दिया जा सकता है, एलिमेंट को खाली छोड़कर:
<span class="tanrei-icon" data-icon="folder"></span>ग्लिफ़ वही बनता है, पर उसका नाम पेज का टेक्स्ट नहीं रहता: वह textContent या innerText में नहीं आता, कॉपी किए गए टेक्स्ट में नहीं आता, और आसपास के कंट्रोल के एक्सेसिबल नाम में भी नहीं आता। इसे वहाँ इस्तेमाल करें जहाँ नाम वरना टेक्स्ट की तरह पढ़ा जाता, जैसे मेन्यू या सूची की कोई पंक्ति, टेबल का कोई सेल, या वह टेक्स्ट जिसकी तुलना कोई टेस्ट करता है। साइज़, सिलेक्शन और दाएँ से बाएँ लेआउट में मिरर होना ठीक वैसे ही काम करते हैं जैसे टेक्स्ट में लिखे नाम के साथ। जब आइकन के पास का टेक्स्ट वही बात कहता हो, तो aria-hidden="true" बनाए रखें: Firefox 128 से पहले के वर्शन नाम को एक्सेसिबल नाम में पढ़ते हैं।
नेटिव प्लैटफ़ॉर्म पर यही मान डिज़ाइन सिस्टम के साथ आते हैं (system.icon), साथ में एक छोटा हेल्पर, जो चयनित होने की स्थिति और एक साइज़ को उस रूप में बदलता है जो फ़ॉन्ट को चाहिए। Tanrei अभी कोई आइकन कंपोनेंट शिप नहीं करता।
आइकन सेट डिज़ाइन सिस्टम का होता है, इसलिए लेयर उसे बदल सकती है। साथ आने वाले सिस्टम इन मानों पर रिज़ॉल्व होते हैं:
| डिज़ाइन सिस्टम | family.unselected | family.selected | weight | fill.unselected | fill.selected |
|---|---|---|---|---|---|
tanrei | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
cupertino | Material Symbols Rounded | Material Symbols Rounded | 300 | 0 | 1 |
m3-expressive-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
m3-like | Material Symbols Outlined | Material Symbols Outlined | 400 | 0 | 1 |
इससे जनरेट किया गया: tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json
आइकन फ़ॉन्ट चयनित आइकन को अचयनित से दो में से किसी एक तरीक़े से अलग करता है, और टोकन दोनों को कवर करते हैं। चयनित आइकन हमेशा family.selected और fill.selected दोनों लेता है; दोनों में से कौन-सा वास्तव में बनने वाली चीज़ को बदलता है, यह सेट पर निर्भर है।
वेरिएबल आइकन फ़ॉन्ट, जैसे Material Symbols, FILL अक्ष वाली एक ही फ़ैमिली है। फ़ैमिली के दोनों टोकन डिफ़ॉल्ट रूप से ref.typeface.icon की ओर इशारा करते हैं, इसलिए उस एक टोकन को दूसरी जगह मोड़ने से सेट बदल जाता है, और fill.unselected / fill.selected स्टेट को अलग करते हैं। m3-like बस इतना ही लिखता है:
"tokens": {
"tanrei.ref.typeface.icon": { "$value": ["Material Symbols Outlined"], "reason": "Material Design 3 draws Material Symbols in the Outlined style." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "Material Symbols default weight in Material Design 3." }
}स्टैटिक आइकन फ़ॉन्ट में कोई अक्ष नहीं होता। वह आउटलाइन वाले और भरे हुए चित्र दो अलग फ़ैमिली के रूप में देता है, इसलिए लेयर हर स्टेट के लिए एक फ़ैमिली का नाम देती है:
"tokens": {
"tanrei.sys.icon.family.unselected": { "$value": ["Material Icons Outlined"], "reason": "Acme uses the static Material Icons set: outlined when unselected." },
"tanrei.sys.icon.family.selected": { "$value": ["Material Icons"], "reason": "Acme uses the static Material Icons set: filled when selected." },
"tanrei.sys.icon.weight": { "$value": 400, "reason": "A static icon font has one weight; 400 is what Material Icons is drawn at." }
}फ़िल और वेट के टोकन जैसे हैं वैसे ही रहते हैं। स्टैटिक फ़ॉन्ट अक्षों को नज़रअंदाज़ कर देता है, इसलिए उनसे कोई नुक़सान नहीं होता, और कंपोनेंट को यह जानने की ज़रूरत नहीं कि किस तरह का सेट सक्रिय है। यह लेयर रिपॉज़िटरी का अपना टेस्ट फ़िक्स्चर है (packages/tokens-build/test/fixtures/acme.system.json)।
Tanrei यह तय करता है कि आइकन कैसे बनता है, यह नहीं कि कौन-से आइकन मौजूद हैं। सेट अपने ग्लिफ़ को अलग-अलग नाम देते हैं, और हो सकता है किसी सेट में वह ग्लिफ़ न हो जो दूसरे में है। जो प्रॉडक्ट अपना आइकन सेट बदलता है, वह अपने इस्तेमाल किए हुए नाम जाँचता है। जो सिंबल सेट फ़ॉन्ट नहीं है, जैसे SF Symbols, उसे फ़ैमिली टोकन से नाम नहीं दिया जा सकता; यह मिमिक्री-गैप रजिस्ट्री में platform-symbol-sets के रूप में दर्ज है।
React Native का <Text> फ़ॉन्ट-वेरिएशन अक्ष सेट नहीं कर सकता, इसलिए वेरिएबल आइकन फ़ॉन्ट के साथ FILL कभी ग्लिफ़ तक नहीं पहुँचता और आइकन दोनों स्टेट में एक जैसा दिखता है। वहाँ नियम बनाए रखने के लिए ऊपर की तरह दो स्टैटिक फ़ैमिली इस्तेमाल करें, या आइकन SVG के रूप में बनाएँ।
चारों नेटिव पैकेजों के आइकन हेल्पर अभी “हर स्टेट की अपनी फ़ैमिली” वाले मॉडल पर ले जाए जा रहे हैं; जब तक किसी पैकेज का README इसका वर्णन न करे, मानकर चलें कि वह पैकेज एक ही फ़ैमिली पढ़ता है।