@web-पोर्टफोलियो/आइकन

Published and maintain an npm component library (@web-portfolio/icons) — 629 bundled SVG icons behind one typed <Icon /> component, versioned and consumed across multiple projects instead of ad hoc per-icon imports.

View Repository View Live

यह एक व्यक्तिगत पोर्टफोलियो वेबसाइट के लिए आइकन सेट के रूप में शुरू हुआ, और यह इतना विकसित हुआ कि इसे स्वतंत्र रूप से प्रकाशित करने लायक माना गया: इसमें कोई आइकन फ़ॉन्ट नहीं है, रनटाइम पर किसी भी CDN अनुरोध की आवश्यकता नहीं है, और लोड करने के लिए कुछ भी एसिंक्रोनस नहीं है। सब कुछ पैकेज के अंदर शामिल है और तुरंत प्रदर्शित होता है.

पूरे आइकन सेट को देखने के लिए यहां जाएं:icons.getresume.dev- नाम या श्रेणी के आधार पर खोज करें, किसी भी आइकन पर रंग/रेखा/आकार नियंत्रणों का उपयोग करके देखें, और बिल्कुल वैसा ही कॉपी करें।<आइकन/>या पेज से सीधे स्निपेट या रॉ एसवीजी कोड प्राप्त करें।

यह क्यों मौजूद है?

आमतौर पर, एक पोर्टफोलियो या डैशबोर्ड बनाने का मतलब दो चीजों में से कोई एक होता है: या तो कुछ ग्लिफ़ के लिए एक आइकन फ़ॉन्ट का उपयोग करना, या फिर उन्हें बिखेर देना।`<img src="...">`यह पैकेज एक विकल्प है - क्योंकि पूरे कोडबेस में ऐसे टैग मौजूद हैं जो किसी सीdn (CDN) की ओर इशारा करते हैं, और यह निश्चित नहीं होता कि वह तब काम कर रहा होगा या नहीं जब इसकी आवश्यकता होगी। इनमें से कोई भी समाधान "React शब्द के बगल में React का लोगो दिखाएं" जैसे छोटे कार्य के लिए उपयुक्त नहीं था।<आइकन नाम="react" />यह काम कर चुका है, और यही घटक विभिन्न उपयोगों के लिए उपयुक्त है, चाहे आपको एक तकनीकी स्टैक बैज की आवश्यकता हो, एक सोशल लिंक आइकन की, या कैरोसेल बटन के लिए एक साधारण तीर की।

कुछ चीजें जो यह जानबूझकर करता है।

एक घटक, 629 आयात नहीं। रजिस्ट्री[नाम]यह रेंडरिंग के समय डेटा की खोज करता है, इसलिए आप कभी भी किसी ऐसी स्थिति में नहीं पड़ते हैं जहाँ...import { ReactIcon, DockerIcon, PostgresIcon } from '...';एक फ़ाइल के ऊपर फैली हुई चीज़ें।
रनटाइम पर कुछ भी प्राप्त नहीं हुआ.पूरी रजिस्ट्री को निर्माण के समय ही बंडल कर दिया जाता है और इसे SVGO के साथ अनुकूलित किया जाता है, इसलिए इसमें कोई लोडिंग स्टेट नहीं होता, जब कोई इमेज लोड होती है तो लेआउट में कोई बदलाव नहीं आता, और यह ऑफलाइन भी काम करता है।
जहां उचित हो, अनुकूलन योग्य बनाएं। रंगकृपया वह पाठ प्रदान करें जिसका आप अनुवाद करवाना चाहते हैं।स्ट्रोकऔररेखा की मोटाईआप अपने रंग पैलेट से मेल खाने के लिए मोनोक्रोम आइकन को फिर से रंग सकते हैं; ब्रांडिंग चिह्न जो एक विशिष्ट रंग में रहने चाहिए (उदाहरण के लिए, रिएक्ट लोगो का नीला रंग), उन्हें जानबूझकर अपरिवर्तित छोड़ दिया जाता है।
बॉक्स से निकालने के तुरंत बाद टाइप किया गया।कोई अलग व्यवस्था नहीं।@टाइप्स/इसका मतलब है कि आपको किसी अतिरिक्त पैकेज को याद रखने और उसे स्थापित करने की चिंता करने की आवश्यकता नहीं है।

स्थापना

npm इंस्टॉल @web-portfolio/icons

pnpm कमांड का उपयोग करके "@web-portfolio/icons" पैकेज को जोड़ें।

yarn के माध्यम से "@web-portfolio/icons" पैकेज स्थापित करें।

इसके लिए रिएक्ट का संस्करण 18 या उससे ऊपर की आवश्यकता है।

एक रजिस्ट्री, दो प्रकाशित पैकेज, और एक स्थिर गैलरी।

प्रकाशित पैकेज चार पैकेजों और दो अनुप्रयोगों वाले एक मोनोरेपो का हिस्सा है। `packages/db` में टर्सो/लिबएसक्यूएल के खिलाफ ड्रिज़ल स्कीमा है - यह एकमात्र ऐसा घटक है जो डेटाबेस से इंटरैक्ट करता है, और केवल `apps/admin` (एक क्रेडेंशियल-सुरक्षित CRUD डैशबोर्ड) और सीड स्क्रिप्ट्स के माध्यम से। `packages/core` निजी और आंतरिक है: इसमें `generate-registry` बिल्ड स्टेप और बंडल किया गया `registry.generated.ts` शामिल हैं, जिनका उपयोग दोनों प्रकाशित पैकेजों में होता है। `packages/react` `@web-portfolio/icons` है; `packages/sanity-plugin` `@web-portfolio/icons-sanity`, स्टूडियो पिकर है। `apps/gallery` - जो कि `icons.getresume.dev` पर सार्वजनिक वेबसाइट है - उसी रजिस्ट्री का चौथा उपभोक्ता है, जिसे `techicons.dev` के अनुसार डिज़ाइन किया गया है।

Design detail

apps/gallery reads nothing but the committed registry.generated.ts — no database, no env vars, at request time or build time. An edit made in apps/admin only reaches the public gallery after someone reruns generate-registry and redeploys; the two are deliberately decoupled so neither the live gallery nor the two published packages ever depend on Turso being reachable.

एक पेस्ट किए गए SVG को रजिस्ट्री प्रविष्टि में बदलना।

`generate-registry.ts` वह फ़ाइल है जो वास्तव में `registry.generated.ts` बनाती है: यह टुरसो से प्रत्येक आइकन के रॉ SVG डेटा को निकालता है, इसे SVGO (मल्टीपास, डिफ़ॉल्ट प्रीसेट, `viewBox` को हटाना स्थगित कर दिया गया क्योंकि `viewBox` को अलग रखा जाता है) के माध्यम से संसाधित करता है, और फिर इसे एक संक्षिप्त `{viewBox, innerHTML}` प्रविष्टि में पुनः लिखता है। यह पुनर्लेखन केवल मोनोक्रोम श्रेणियों में मौजूद आइकन पर लागू होता है—devicon के "plain"/"line" वेरिएंट, मटेरियल सिंबल्स, सिंपल आइकॉन्स—जहां किसी भी हार्डकोडेड फ़िल/स्ट्रोक को `currentColor` से बदल दिया जाता है ताकि `<Icon color>` प्रॉपर्टी वास्तव में कुछ काम करे। ब्रांड-कलर श्रेणियों (devicon के "original"/"original-wordmark") में यह चरण पूरी तरह से छोड़ दिया जाता है, इसलिए React का नीला या Docker का हरा रंग कभी भी उस टेक्स्ट कलर में परिवर्तित नहीं होता जो उसके आसपास होता है.

rebuilding the registry from scratchbash

# one-time: schema + all three icon sources
pnpm --filter @web-portfolio/icons-db db:migrate
pnpm --filter @web-portfolio/icons-db seed-all

# SVGO + currentColor normalization -> packages/core/src/registry.generated.ts
pnpm generate-registry

633 आइकन वास्तव में कहाँ से आए हैं?

तीन लाइसेंस प्राप्त स्रोत हैं, प्रत्येक का अपना श्रेय है और प्रत्येक को अपने स्वयं के स्क्रिप्ट द्वारा संचालित किया जाता है: देविकॉन (MIT) 578 तकनीकी/उपकरण लोगो प्रदान करता है। मटेरियल सिम्बल्स (Apache-2.0) 38 प्रतीक प्रदान करता है - जिनमें से 34 सामान्य यूआई/नेविगेशन चिह्न हैं, और 4 सामान्य विकल्प (बोल्ट, अनुवाद, चेकलिस्ट, उपहार) हैं जिन्होंने ऐप्पल एसएफ सिम्बल्स पीएनजी को बदल दिया था जिनका उपयोग पोर्टफोलियो साइट पहले करती थी, जिन्हें खुले लाइसेंस वाले पैकेज से पुनर्वितरित करना सुरक्षित नहीं था। सिंपल आइकॉन्स (CC0) शेष 17 प्रतीक प्रदान करता है - जिनमें से 12 ऐसे सोशल-प्लेटफ़ॉर्म लोगो हैं जो देविकॉन द्वारा कवर नहीं किए जाते हैं, और 5 डेवलपर टूल चिह्न (MCP, Google Analytics, LangChain, Ollama, Pydantic) हैं।

हर अनुरोधित आइकन के लिए लाइसेंस प्राप्त स्रोत उपलब्ध नहीं होते हैं - Segment, Statsig और Google Stitch इनमें से किसी भी तीन में शामिल नहीं हैं (Stitch उनके नवीनतम रिलीज़ के बाद जारी किया गया था)। ब्रांड एसेट को बिना स्पष्ट पुनर्वितरण लाइसेंस के उपयोग करने के बजाय, उन्हें मैन्युअल रूप से ऐप्स/एडमिन के "कच्चे SVG पेस्ट करें" फ़्लो के माध्यम से जोड़ा जाता है, जो उस व्यक्ति द्वारा किया जाता है जो इसे जोड़ रहा है, न कि स्वचालित प्रक्रिया द्वारा।

पंजीकृत प्रत्येक चिह्न (आइकन) स्पष्ट रूप से इंगित कर सकता है कि वह किस स्रोत से आया है और उस स्रोत का लाइसेंस क्या है - यह एक अतिरिक्त लोगो से कहीं अधिक मूल्यवान है।

icon.getresume.dev वेबसाइट का स्क्रीनशॉट।

icons.getresume.dev आइकन के विवरण लिंक का स्क्रीनशॉट।