منصوبے کے بارے میں

# Ionicons [Ionicons](http://ionicons.com/) ایک مکمل طور پر اوپن سورس آئیکن سیٹ ہے جس میں ویب، iOS، Android اور ڈیسک ٹاپ ایپس کے لیے 1,300 آئیکن بنائے گئے ہیں۔ Ionicons کو [Ionic Framework](https://ionicframework.com/) کے لیے بنایا گیا تھا، اس لیے آئیکنز کے Material Design اور iOS دونوں ورژن موجود ہیں۔ نوٹ: تمام برانڈ آئیکنز اپنے متعلقہ مالکان کے ٹریڈ مارک ہیں۔ ان ٹریڈ مارکس کا استعمال Ionic کی طرف سے ٹریڈ مارک ہولڈر کی توثیق کا اشارہ نہیں دیتا، اور نہ ہی اس کے برعکس۔ ہمارا ارادہ ہے کہ یہ آئیکن پیک [Ionic](http://ionicframework.com/) کے ساتھ استعمال کیا جائے، لیکن یہ کسی بھی طرح اس تک محدود نہیں ہے۔ انہیں جہاں مناسب لگے استعمال کریں، ذاتی یا تجارتی۔ وہ استعمال کے لیے مفت ہیں اور [MIT](http://opensource.org/licenses/MIT) کے تحت لائسنس یافتہ ہیں۔ ## تعاون تعاون میں دلچسپی کے لیے شکریہ! [تعاون](https://github.com/ionic-team/ionicons/blob/main/CONTRIBUTING.md) کے لیے ہمارے رہنما اصول پڑھیں اور پھر [help wanted](https://github.com/ionic-team/ionicons/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) لیبل والے ہمارے مسائل دیکھیں۔ ## ویب کمپوننٹ کا استعمال Ionicons ویب کمپوننٹ آپ کی ایپ میں Ionicons استعمال کرنے کا ایک آسان اور موثر طریقہ ہے۔ کمپوننٹ ہر آئیکن کے لیے ایک SVG کو متحرک طور پر لوڈ کرے گا، اس لیے آپ کی ایپ صرف ان آئیکنز کی درخواست کرتی ہے جن کی آپ کو ضرورت ہے۔ یہ بھی نوٹ کریں کہ صرف نظر آنے والے آئیکنز لوڈ ہوتے ہیں، اور جو آئیکنز "نیچے" ہیں اور صارف کی نظر سے پوشیدہ ہیں وہ svg وسائل کے لیے fetch درخواستیں نہیں کرتے۔ ### تنصیب اگر آپ [Ionic Framework](https://ionicframework.com/) استعمال کر رہے ہیں، تو Ionicons بطور ڈیفالٹ پیک کیا جاتا ہے، اس لیے کسی تنصیب کی ضرورت نہیں ہے۔ Ionic Framework کے بغیر Ionicons استعمال کرنا چاہتے ہیں؟ انہیں فعال کرنے کے لیے اپنے صفحے کے آخر میں، بند ہونے والے `</body>` ٹیگ سے ٹھیک پہلے، درج ذیل `<script>` رکھیں۔ ```html <script type="module" src="https://esm.sh/ionicons@latest/loader"></script> <script nomodule src="https://esm.sh/ionicons@latest/loader"></script> ``` آپ Ionicon کا کوئی بھی ورژن منتخب کرنے کے لیے `latest` کو تبدیل کر سکتے ہیں، مثلاً: ```html <script type="module" src="https://esm.sh/ionicons@8.0.0/loader"></script> <script nomodule src="https://esm.sh/ionicons@8.0.0/loader"></script> ``` ### بنیادی استعمال Ionicons پیکج سے بلٹ ان آئیکن استعمال کرنے کے لیے، ion-icon کمپوننٹ پر `name` وصف بھریں: ```html <ion-icon name="heart"></ion-icon> ``` ### حسب ضرورت آئیکنز حسب ضرورت SVG استعمال کرنے کے لیے، بیرونی SVG فائل کی درخواست کرنے کے لیے `src` وصف میں اس کا url فراہم کریں۔ `src` وصف `<img src="...">` کی طرح کام کرتا ہے کہ url اس ویب صفحے سے قابل رسائی ہونا چاہیے جو تصویر کی درخواست کر رہا ہے۔ مزید برآں، بیرونی فائل صرف ایک درست svg ہو سکتی ہے اور svg عنصر کے اندر اسکرپٹس یا ایونٹس کی اجازت نہیں دیتی۔ ```html <ion-icon src="/path/to/external/file.svg"></ion-icon> ``` #### حسب ضرورت اثاثہ راستہ اگر آپ کے پاس آئیکنز کا ایک مختلف سیٹ ہے جسے آپ لوڈ کرنا چاہتے ہیں یا اگر Ionicon آئیکنز کسی مختلف صفحے یا راستے پر میزبانی کیے گئے ہیں، تو آپ وہ اثاثہ url سیٹ کر سکتے ہیں جہاں سے Ionicons آئیکنز کھینچتا ہے: ```ts import { setAssetPath, addIcons } from 'ionicons'; import { add, logoIonic, save } from 'ionicons/icons'; // آئیکنز لوڈ کرنے کے لیے جڑ کا راستہ "<root>/public/svg" پر سیٹ کریں setAssetPath(`${window.location.origin}/public/svg/`); // صرف مخصوص آئیکنز لوڈ کریں addIcons({ add, logoIonic, save }); ``` یہ نامزد آئیکنز کے استعمال کی اجازت دیتا ہے جیسے: ```html <!-- اب svg کو "<root>/public/svg/heart.svg" سے کھینچتا ہے --> <ion-icon name="heart"></ion-icon> ``` ## مختلف شکلیں Ionicons میں ہر ایپ آئیکن کی `filled`، `outline` اور `sharp` شکل ہوتی ہے۔ یہ مختلف شکلیں آپ کی ایپ کو مختلف پلیٹ فارمز کے لیے مقامی محسوس کرنے کے لیے فراہم کی گئی ہیں۔ filled شکل بغیر کسی لاحقے کے ڈیفالٹ نام استعمال کرتی ہے۔ نوٹ: لوگو آئیکنز میں outline یا sharp شکلیں نہیں ہوتیں۔ ```html <ion-icon name="heart"></ion-icon> <!--filled--> <ion-icon name="heart-outline"></ion-icon> <!--outline--> <ion-icon name="heart-sharp"></ion-icon> <!--sharp--> ``` ### پلیٹ فارم کی خصوصیت Ionic Framework میں آئیکنز استعمال کرتے وقت آپ ہر پلیٹ فارم کے لیے مختلف آئیکنز بتا سکتے ہیں۔ `md` اور `ios` وصف استعمال کریں اور پلیٹ فارم کے لیے مخصوص آئیکن/شکل کا نام فراہم کریں۔ ```html <ion-icon ios="heart-outline" md="heart-sharp"></ion-icon> ``` ## سائز آئیکن کا سائز بتانے کے لیے، آپ ہمارے پہلے سے طے شدہ فونٹ سائز کے لیے size وصف استعمال کر سکتے ہیں۔ ```html <ion-icon size="small"></ion-icon> <ion-icon size="large"></ion-icon> ``` یا آپ `ion-icon` کمپوننٹ پر `font-size` CSS پراپرٹی لگا کر ایک مخصوص سائز سیٹ کر سکتے ہیں۔ یہ تجویز کیا جاتا ہے کہ پکسل سائز استعمال کریں جو 8 کے ضرب ہوں (8، 16، 32، 64، وغیرہ) ```css ion-icon { font-size: 64px; } ``` ## رنگ `ion-icon` کمپوننٹ پر `color` CSS پراپرٹی لگا کر آئیکن کا رنگ بتائیں۔ ```css ion-icon { color: blue; } ``` ## اسٹروک کی چوڑائی `outline` آئیکن شکل استعمال کرتے وقت اسٹروک کی چوڑائی کو ایڈجسٹ کرنا ممکن ہے، تاکہ آئیکن کے سائز یا ملحقہ متن کی چوڑائی کے نسبت بصری توازن بہتر ہو۔ آپ `ion-icon` کمپوننٹ پر `--ionicon-stroke-width` CSS کسٹم پراپرٹی لگا کر ایک مخصوص سائز سیٹ کر سکتے ہیں۔ ڈیفالٹ ویلیو 32px ہے۔ ```html <ion-icon name="heart-outline"></ion-icon> ``` ```css ion-icon { --ionicon-stroke-width: 16px; } ``` ## v4 سے منتقلی آئیکن حذف/نام تبدیل کرنے کی فہرست کے لیے [5.0 ریلیز نوٹس](https://github.com/ionic-team/ionicons/releases/tag/5.0.0) دیکھیں۔ ## لائسنس Ionicons [MIT لائسنس](http://opensource.org/licenses/MIT) کے تحت لائسنس یافتہ ہے۔ ## متعلقہ * [Ionicons ہوم پیج](http://ionicons.com/) * [Ionic Framework](https://ionicframework.com/) * [Ionic Discord](https://ionic.link/discord) * [Ionic فورم](https://forum.ionicframework.com/) * [Stencil](https://stenciljs.com/) * [Capacitor](https://capacitorjs.com/)