ספריית אייקונים של Material UI

תמלול ההרצאה: ספריית אייקונים של Material UI

הטקסט המלא של הדקות הראשונות בהרצאה «ספריית אייקונים של Material UI» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

   הדבר הבא שאנחנו רוצים לראות במטריאל UI זה שימוש באייקונים של מטריאל UI. הדבר הראשון שאנחנו צריכים לעשות זה להתקין ספריית אייקונים של מטריאל UI. בואו נלך רגע להתקנה שעשינו של מטריאל UI זאת זאת npmi strudel על Material UI אבל במקום /core אנחנו רוצים /icones.

2. 00:29

   זה מתקין את כל ספריית האייקונים של Material UI. בואו נריץ את זה ועד שהוא מסיים את ההתקנה בואו נראה איזה אייקונים יש. זה ניתן לראות באתר שלהם והיה פה Material Icons.

3. 00:47

   יש לנו כאן המון אייקונים מאות על מאות של אייקונים וכמובן אם אנחנו רוצים אנחנו פשוט עושים איזשהו search עבור האייקונים האלה, נניח אני רוצה אייקון שקשור ב-E-Mail, אני פשוט רושם E-Mail ואלה האייקונים, והנה אנחנו רואים את ה-Variants השונים שלהם, איך זה נראה ב-Outline

4. 01:07

   ואולי Rounded ו-Two-Tone ו-Sharp, אוקיי, אלה הווריאנטים של אותם האייקונים, ונניח אני רוצה לחפש אייקון שקשור ב-User, אני רושם User והנה כל האייקונים שקשורים ל-Usרים, ממש מאות על מאות של אייקונים ואנחנו רוצים לשלב אותם.

5. 01:28

   אז בואו נחזור לכאן ומה אנחנו רוצים לעשות. נתחיל כאן, ליד ה-contact us אני רוצה אייקון של איזשהו e-mail או משהו כזה. בואו נחפש רגע איזה e-mail ויש לנו, בואו ניקח את זה, מייל Outline.

6. 01:52

   אז הוא נכנס ואומר, תשמע, זה ה-import שאתה צריך ואלה ככה זה נראה ואיזשהו, תיבה כזאת שנותנת לנו עוד אינפורמציה לגביו, אבל זה מה שחשוב לי, מייל אאוטליין, זה השם שלו.

7. 02:10

   אז אני הולך ויוצר תגית שנקראת מייל אאוטליין, הנה היא כאן, ואני אבחר אותה, תגית ריקה, אני רואה שהוא הביא לי אותה כאן ממטריאל UI אייקונס ופשוט שם לי אותה.

8. 02:28

   בואו נסתכל רגע על האתר שלנו, נפרש אותו והנה אנחנו רואים את האייקון הקטנצ'יק הזה שנמצא כאן. אורייט, בואו נראה איך אנחנו יכולים לשלב אייקונים נוספים הפעם בתוך הלחצנים.

9. 02:47

   אז כאן ברמת הלחצן כמובן שפה אנחנו יכולים לשים אייקון והאייקון הזה ייראה ליד הכיתוב. בואו רגע נסתכל על זה, נחפש איזה אייקון של סנד אולי, אוקיי יש לנו פה את הסנד הזה, זה השם של התגית אז אנחנו יכולים לשים פה סנד, בואו נראה רגע איך זה נראה וזה נראה בצורה כזאת קצת קרוב למילה send אז מטריאל יואל נותנת

10. 03:16

    לנו אפשרות להגדיר את האייקונים גם על ידי אטריביוטס לדוגמה סטארט אייקון בואו נחפש אותו הנה הוא תן לי את התגית הזאת אבל שים לי אותה פה בסטארט אייקון בואו נראה איך זה נראה נפרש רגע כל פעם שהוא לא קולט את השינויים אנחנו אנחנו צריכים לעשות פה איזשהו שינוי ולשמור מחדש ולרפרש מחדש.

11. 03:47

    אולי עכשיו הוא יקלוט את זה? לא, האמת שזה נראה אותו דבר, או שלא, הוא עדיין חושב. הנה, עכשיו הוא קצת זז יותר לסטארט.

12. 04:01

    בואו ננסה לחפש אנד אייקון.