מדריך לשימוש בסמלי החומר

מהם סמלי חומרים?

סמלי חומרים הם הסמלים החדשים ביותר שלנו, שמרכזים יותר מ-2,500 גליפים בקובץ בגופן יחיד עם מגוון רחב של וריאציות עיצוב. הסמלים זמינים ב שלושה סגנונות וארבעה צירי גופן משתנים שניתן לשנות (מילוי, משקל, שיפוע בגודל אופטי). ניתן לראות את הקבוצה המלאה של סמלי החומר ספריית סמלי החומר.

ציר FILL

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

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

ציר wght

המשקל מגדיר את משקל הקו של הסמל, עם טווח של משקלים בין דק (100) ומודגש (700). המשקל יכול להשפיע גם על הגודל הכולל של הסמל.

ציר GRAD

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

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

אפשר להשתמש בציון לצרכים שונים:

הדגשה נמוכה (למשל: -25 בדרגה): כדי להפחית את הברק של סמל בהיר על סמל כהה השתמש בציון נמוך.

הדגשה גבוהה (למשל, 200 בדרגה): כדי להדגיש סמל, מגדילים את הערך החיובי. בלי ציון.

ציר opsz

הגדלים האופטיים נעים בין 20dp ל-48dp.

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

קבלת סמלים של חומרים

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

רישוי

סמלי החומר זמינים מתחת רישיון Apache גרסה 2.0.

עיון בסמלים נפרדים והורדה שלהם

הקבוצה המלאה של סמלי חומר זמינה ספריית סמלי החומר בפורמט SVG או PNG. הן מתאימות לאינטרנט, ל-Android ול-iOS, או בכל סוגי האפליקציות וכלי עיצוב.

מאגר Git

מאגר git מכיל את הקבוצה המלאה של סמלי Material Symbols בפורמט SVG.

$ git clone https://github.com/google/material-design-icons

שימוש בסמלי חומרים

שימוש בדפדפן

הגופן Material Symols הוא הדרך הקלה ביותר לשלב סמלי חומרים לתוך פרויקטים באינטרנט.

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

גופן סטטי עם גופנים של Google

הדרך הקלה ביותר להגדיר גופן סמלים לשימוש בכל דף אינטרנט היא באמצעות Google Fonts. כוללים את השורה היחידה של קוד ה-HTML:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

קטע הקוד שלמעלה כולל את הגדרות ברירת המחדל של כל אחד מהקטעים ציר, עם משקל ב-400, גודל אופטי ל-48, ציון ב-0 מילוי (גם 0.)

משתמשים ב Fonts CSS API כדי להגדיר ערכי צירים שונים. דוגמאות:

גופן משתנה עם Google Fonts

אם יוצרים אנימציה של סמלים באמצעות CSS, או אם רוצים שליטה מדויקת יותר בתכונות הסמל, אפשר להשתמש הגופן של המשתנה Google Symbols. באמצעות טווחים, בפורמט number..number, אנחנו יכולים לטעון את כל הגופן של המשתנה. ביצוע צ'ק-אאוט האם אפשר להשתמש בתמיכה בגופנים המשתנים של Google כדי להבין אם המשתמשים יוכלו לטעון את הגופן המשתנה, מה הסבירות. הנה כמה דוגמאות:

אפשר אפילו להוסיף להם אנימציה!

אירוח עצמי של הגופן

אירוח גופן הסמל במיקום שאתם קובעים, כדי להחליט מתי לעדכן את הנכס. עבור לדוגמה, אם כתובת ה-URL היא https://example.com/material-symbols.woff, צריך להוסיף את כלל ה-CSS הבא:

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

הערה: כדי לספק לכל המשתמשים את החוויה הטובה ביותר, כדאי להשתמש בכמה פורמטים של גופנים שנדרש, שמספק Google Fonts API. למידע נוסף על "אירוח עצמי" על ידע בנושא Google Fonts.

כדי לעבד את הגופן בצורה תקינה, צריך להצהיר על כללי ה-CSS לעיבוד הסמל. האלה בדרך כלל מוצגים כחלק מגיליון הסגנונות של Google Fonts API, אבל צריך להיכלל באופן ידני בפרויקטים שלכם באירוח עצמי:

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

שימוש בסמלים ב-HTML

בדוגמאות שלמעלה נעשה שימוש בתכונה טיפוגרפית שנקראת ליגטורות, שמאפשר לעבד גליף סמל פשוט על ידי שימוש בשם הטקסט שלו. דפדפן האינטרנט מחליף באופן אוטומטי את ליגטור הטקסט בווקטור הסמל מספקת קוד קריא יותר מההפניה המספרית המקבילה לתווים. עבור לדוגמה, ב-HTML יהיה הערך arrow_forward שמייצג סמל, במקום . כדי להשתמש בסמלים אחרים, משתמשים בנרתיק הנחש של שם הסמל (כלומר, החלפת רווחים בקו תחתון).

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

אם אתם צריכים לתמוך בדפדפנים שלא תומכים בליגטורות, סמלים שמשתמשים בהפניות מספריות לתווים (שנקראים גם נקודות קוד), כמו בדוגמה למטה:

מוצאים את שמות הסמלים וגם את נקודות הקוד ספריית סמלי החומר על ידי בחירה בסמל כלשהו ופתיחת חלונית הגופן של הסמלים. לכל גופן של סמל יש אינדקס נקודות הקוד בגופן Google Fonts מאגר git שמציג את הקבוצה המלאה של השמות וקודי התווים.

עיצוב סמלים ב-Material Design

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

שימוש ב-Android

בספריית סמלי החומרים, כל הסמלים הם בפורמט Vector Drawable. שפת תרגום לקבלת מידע נוסף, מסמכי תיעוד של Android Vector Asset Studio

שימוש ב-iOS

הסמלים זמינים גם בפורמט Apple Symbols. כדי לקבל עליהם מידע נוסף, כדאי לבדוק את הסמלים הרשמיים של Apple סקירה כללית וגם הנחיות לשימוש.

שימוש ב-Flutter

מתוכננת תמיכה ב-Flutter בסמלי חומרים. עדכונים נוספים יגיעו בקרוב.