วิธีใช้ไอคอนแบบกำหนดเองในวัสดุเชิงมุม

หากคุณต้องการใช้ไอคอนแบบกำหนดเองใน Angular Material คุณต้องดำเนินการสองสามขั้นตอน ก่อนอื่น คุณจะต้องสร้างชุดไอคอนของคุณเอง วัสดุเชิงมุมมาพร้อมกับชุดไอคอนในตัว แต่คุณสามารถสร้างเองได้ เมื่อคุณมีไอคอนแล้ว คุณจะต้องลงทะเบียนกับ Angular Material ซึ่งสามารถทำได้ในไฟล์โมดูลของแอป เมื่อลงทะเบียนไอคอนของคุณแล้ว คุณสามารถใช้มันได้เหมือนกับไอคอนในตัว คุณสามารถใช้สิ่งเหล่านี้ในมาร์กอัปของคุณ หรือเข้าถึงโดยทางโปรแกรมก็ได้ นั่นคือทั้งหมดที่มีเพื่อใช้ไอคอนแบบกำหนดเองใน Angular Material! เมื่อทำตามขั้นตอนเหล่านี้ คุณจะสามารถเพิ่มไอคอนของคุณเองไปยัง Angular Material เพื่อใช้ในแอปพลิเคชันของคุณได้อย่างง่ายดาย

ในบทช่วยสอนนี้ เราจะใช้คอมโพเนนต์ >mat-icon> เพื่อสร้างฟอนต์ไอคอนวัสดุ คอมโพเนนต์จะถูกใช้นอกเหนือจากการรองรับไอคอน sva แบบกำหนดเอง บน GitHub คุณสามารถค้นหารหัสการทำงานทั้งหมดได้ โพสต์นี้มีไว้สำหรับผู้ที่กำลังเรียนรู้ Angular v4.2+ เท่านั้น วัสดุเชิงมุมสำหรับบทช่วยสอนนี้เขียนขึ้นใน Angular 5.2 และ Angular 10.1 ไอคอนที่เราจะใช้ในบทช่วยสอนนี้ (ซึ่งมีลักษณะเป็นใบหน้ายิ้ม) คือไอคอนแสดงอารมณ์ นอกจากรายการไอคอน Material ที่ครอบคลุมแล้ว เว็บไซต์ดีไซน์ Material ยังนำเสนอ สไตล์ไอคอน ที่หลากหลายซึ่งสามารถใช้ได้ด้วยตัวเอง

ตอนนี้เราสามารถใช้ไอคอนเมาส์เพื่อแสดง SVG เมื่อป้อนป้ายกำกับในคุณสมบัติอินพุตของไฟล์ a.html คุณจะสามารถใช้ ป้ายกำกับไอคอน เพื่อระบุไอคอนที่จะเข้าถึงได้ URL ควรเป็น https://app.html มาดูกันว่าปัจจุบันมีอะไรบ้าง เมื่อคุณดูที่แอปพลิเคชันในเบราว์เซอร์ของคุณ คุณจะสังเกตเห็นว่าไอคอนที่กำหนดเองนั้นมีสไตล์ใน Material การย้าย MatIconRegistry ไปยังคลาสบริการจะช่วยรักษาและล้างรหัส

ฉันจะใช้ไอคอน Svg ใน Angular 12 ได้อย่างไร

ในการใช้ ไอคอน SVG ใน Angular 12 คุณจะต้องติดตั้งแพ็คเกจ @angular/material และ @angular/material-extensions จากนั้น คุณสามารถใช้บริการ matIconRegistry เพื่อลงทะเบียนไอคอนและเพิ่มลงในส่วนประกอบของคุณได้

คุณสามารถจัดการโค้ดใน Angular2 ได้โดยใช้ ไฟล์ Icon.svg ของคุณเป็นตัวแยก นอกจากนี้ คุณสามารถใช้โมดูล ng-inline-svg (หรือหากเป็นไปได้ วิธีอื่นๆ ที่คล้ายคลึงกัน) เพื่อทำสิ่งนี้ ด้วยเหตุนี้ สิ่งสำคัญคือต้องอยู่ตรงกลาง คุณจะมีไฟล์แยกกันสำหรับรูปภาพแต่ละประเภท โดยที่รูปภาพจะอยู่ในบรรทัดเมื่อโหลดหน้าเว็บ คุณจึงจัดการไฟล์เหล่านั้นได้โดยใช้ JS/CSS

การใช้ aria-describedby เป็นส่วนหนึ่งของ SVG จะช่วยให้ผู้ใช้ที่มีความพิการได้รับประสบการณ์ที่ดียิ่งขึ้นเมื่อใช้เว็บไซต์ของคุณ ด้วยเหตุนี้ เมื่อคุณอธิบายไอคอนของคุณด้วยเพลงที่อธิบายโดย คุณจะสามารถมั่นใจได้ว่าผู้ใช้ที่มีความพิการสามารถเข้าใจสิ่งที่พวกเขาเป็นตัวแทนได้

การอภิปรายของ Png กับ ไอคอน Svg

ในทางกลับกัน คุณยังสามารถเพิ่มช่องอัลฟ่าลงในไฟล์ SVG ได้อีกด้วย กล่าวอีกนัยหนึ่ง เนื่องจากสามารถรวมไว้ในพื้นที่โปร่งใสในขณะที่รักษาสีไว้เล็กน้อย ไอคอน SVG จึงมีความหลากหลายมากกว่า ไอคอน PNG ทางเลือกของไฟล์ที่จะใช้สำหรับไอคอนของคุณขึ้นอยู่กับโครงการเฉพาะของคุณและความต้องการ

ฉันจะใช้ไอคอน Svg แบบกำหนดเองใน Html ได้อย่างไร

หากต้องการใช้ ไอคอน SVG ที่กำหนดเอง ใน HTML คุณต้องรวมเส้นทางไฟล์ของไอคอนในแอตทริบิวต์ href ขององค์ประกอบของไอคอน เส้นทางไฟล์ควรสัมพันธ์กับไดเร็กทอรีรากของเพจ ตัวอย่างเช่น หากไอคอนอยู่ในโฟลเดอร์ชื่อ "icons" ในไดเรกทอรีราก เส้นทางของไฟล์จะเป็น "icons/icon.svg"

นับตั้งแต่มีการเปิดตัวเครื่องมือออนไลน์ เช่น Icomoon และ Fontello ทำให้การสร้างแบบอักษรบนเว็บกลายเป็นเรื่องง่ายขึ้นมาก ด้วย HTML5 เราสามารถเข้าถึงไอคอนได้หลากหลายมากขึ้น ต้องขอบคุณกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ หากคุณต้องการให้การสนับสนุนทางเทคนิคแก่ Explorer 8 มีตัวเลือกสำรองง่ายๆ สองสามตัวเลือก ตัวระบุสำหรับแฟรกเมนต์เป็นคุณสมบัติ SVG ในตัว เราสามารถอ้างอิงแฟรกเมนต์ได้หากต้องการใช้ข้อมูลจำเพาะมุมมอง SVG หรือระบุอาร์เรย์ องค์ประกอบนี้เป็น องค์ประกอบ SVG ตาม >view> ID หากต้องการแสดงเฉพาะม้าดำจากสไปรต์ตัวหมากรุกนี้ (จากวิกิพีเดียคอมมอนส์) คุณต้องตรวจหาค่าเช่นเดียวกับที่คุณทำในโครงร่างด้านล่าง

การใช้แท็ก img เพื่อกำหนดรูปภาพ เทคนิคนี้ทำงานได้ดีกับ Firefox, Chrome, Safari (เดสก์ท็อป) และ Opera หรือคุณสามารถใช้ไฟล์ SVG ภายนอกเพื่อสร้าง CSS sprites ดังที่แสดงในภาพด้านล่าง นี่เป็นเทคนิคการผลิตที่เชื่อถือได้และพร้อมใช้งาน ฉันทดสอบในเบราว์เซอร์หลักๆ หลายตัว (รวมถึง IE8) และทำงานได้อย่างสมบูรณ์ ไอคอนปรากฏบนหน้าจอเป็นแท็ก อีกครั้ง Icomoon สามารถใช้เพื่อสร้างคอลเลกชันของแท็กสัญลักษณ์ด้วยตนเอง หรือคุณสามารถใช้ปลั๊กอิน Grunt บางตัว (Google สำหรับการรวม Grunt SVG) เพื่อทำเช่นนั้น ยกเว้น IE9 วิธีนี้สามารถใช้ได้กับเบราว์เซอร์หลักทั้งหมด แม้แต่โซลูชันของ Jonathan Neal หรือ SVG4 ทุกคนก็สามารถนำมาใช้เพื่อแก้ไขปัญหานี้ได้

เว้นแต่ซอร์สโค้ดจะระบุแอตทริบิวต์ความกว้างที่ต้องการ รูปภาพ sva จะไม่แสดงในเบราว์เซอร์ Chrome หาก SVG ไม่มีแอตทริบิวต์นี้ เบราว์เซอร์จะทำให้รูปภาพใหญ่ขึ้นหรือเล็กลง

วิธีใช้ภาพ Svg บนหน้าเว็บของคุณ

คุณสามารถแทรกรูปภาพ SVG ลงใน HTML ได้โดยตรงโดยใช้แท็ก svg> /svg> ภาพ SVG สามารถเข้าถึงได้ในโค้ด VS หรือ IDE ที่คุณต้องการโดยการคัดลอกโค้ดและวางลงในองค์ประกอบเนื้อหาของเอกสาร HTML ของคุณ หากทุกอย่างราบรื่น หน้าเว็บของคุณจะมีลักษณะเหมือนกับที่แสดงที่นี่ทุกประการ
สามารถสร้างไอคอนด้วยภาพ SVG โดยพิมพ์ชื่อลงในเว็บเบราว์เซอร์ สามารถฝัง HTML ไว้ในนั้นและสามารถติดตั้งเวอร์ชันแคชได้ หลักฐานยังมีแนวโน้มสำหรับอนาคต ไอคอนควรสร้างด้วย PNG หรือ Scalable Graphic Interfaces (SVG)

รายการไอคอน Svg วัสดุเชิงมุม

ไลบรารี Angular Material มีชุดส่วนประกอบ UI ที่ใช้ซ้ำได้ ผ่านการทดสอบอย่างดี และสามารถเข้าถึงได้ตามข้อกำหนดการออกแบบวัสดุของ Google คุณลักษณะหนึ่งของไลบรารีคือความสามารถในการใช้ไอคอน SVG เป็นไอคอนวัสดุ ชุดไอคอนวัสดุเชิงมุมประกอบด้วยไอคอนที่หลากหลาย รวมถึงไอคอนโซเชียลมีเดีย ไอคอนประเภทไฟล์ และลูกศร คุณสามารถเรียกดูรายการไอคอนวัสดุเชิงมุมทั้งหมดได้จากเว็บไซต์ไอคอนวัสดุ

สามารถแสดงไอคอนได้โดยใช้ องค์ประกอบ Mat- Icon ของ Angular Material คุณสมบัติหลักของคอมโพเนนต์นี้คือความสามารถในการแสดงภาพโดยใช้แบบอักษรบนเว็บ เช่น Font-awesome ซึ่งเพียงแค่กำหนดชื่อภาพที่คุณต้องการ เกิดอะไรขึ้นกับไอคอนที่ไม่ได้อยู่ในแบบอักษรบนเว็บ ในไอคอน คุณต้องการเปลี่ยนแปลง (เช่น สีเมื่อวางเมาส์เหนือหรือสถานะของปุ่มในตำแหน่งใดตำแหน่งหนึ่ง) ณ เวลาทำงานหรือไม่ ข้อผิดพลาดต่อไปนี้ปรากฏขึ้นหลังจากที่คุณเปิดส่วนคอนโซลของเบราว์เซอร์ เมื่อใช้บริบท URL ทรัพยากร จะใช้ค่าที่ไม่ปลอดภัย การกำหนด URL เป็นพารามิเตอร์ใช้เพื่อเลี่ยงผ่านSecurityTrustResourceUrl ซึ่งป้องกันผู้โจมตีจากการแทรก URL ที่เป็นอันตราย เช่น URL นี้ โปรดดูเอกสารประกอบอย่างเป็นทางการของ DomSanitizer

เราจะดูวิธีการที่ดีกว่านี้ในภายหลัง แต่ตอนนี้ เราจะใส่วิธีการเหล่านี้ในหน้า app.html เพิ่มคลาสใน แท็ก HTML ไอคอน mat ตามที่อธิบายไว้ข้างต้น เมื่อผู้ใช้วางเมาส์เหนือไอคอน สีของรูปภาพจะเปลี่ยนตาม SCSS ไอคอนควรเปลี่ยนสีเมื่อวางเมาส์เหนือไอคอน ในโพสต์ในอนาคต เราจะพิจารณาปรับปรุงสิ่งนี้และรีแฟกเตอร์เพื่อให้โหลดไอคอนได้โดยใช้บริการ

วิธีใช้ไอคอนวัสดุเชิงมุม

ฉันจะหาไอคอนวัสดุเชิงมุมได้ที่ไหน
สิ่งเดียวที่คุณต้องทำคือใช้ CSS แบบอักษรบนเว็บของ Google ต่อไปนี้ในโค้ด HTML ของคุณ ไอคอนวัสดุสามารถพบได้ในไฟล์เดียว (42KB) และมีขนาดตั้งแต่ใหญ่ไปจนถึงเล็ก ไอคอนถูกแบ่งออกเป็น 10 หมวดหมู่ที่คุณเห็นในที่เก็บ Git ไอคอนยังสามารถโฮสต์บนเซิร์ฟเวอร์ของคุณเอง
เว็บไซต์ที่ดีในการดูไอคอนวัสดุมีอะไรบ้าง
เราได้รวบรวมไอคอน Material ไว้ในที่เก็บ Git ซึ่งรวมถึงรูปแบบทั้งหมดที่เราจัดให้
วิธีที่ดีที่สุดในการปรับแต่งไอคอนของฉันคืออะไร
ต้องเพิ่มองค์ประกอบคลาสในแท็ก HTML ไอคอน mat ตามที่แสดงด้านบน การเพิ่ม SCSS ให้กับคลาสจะเปลี่ยนสีของไอคอนเมื่อใดก็ตามที่ผู้ใช้วางเมาส์เหนือ เมื่อวางเมาส์เหนือไอคอน ตอนนี้ควรเปลี่ยนสี

วิธีใช้ไอคอนวัสดุเชิงมุม

ไอคอนวัสดุเชิงมุมคือ SVG ที่สามารถใช้ในแอปพลิเคชันเชิงมุมของคุณ หากต้องการใช้ไอคอน เพียงเพิ่มคลาสไอคอนให้กับองค์ประกอบ ตัวอย่างเช่น หากต้องการใช้ไอคอนวงกลมบัญชี คุณจะต้องเพิ่มคลาส mat-icon-account-circle ให้กับองค์ประกอบ

เรามีไลบรารีวัสดุเชิงมุมที่สามารถใช้ออกแบบแอปพลิเคชันของเราได้อย่างรวดเร็วและกำหนดแท็กในบิลด์ให้ ไลบรารีวัสดุมีไอคอน mat ซึ่งจำเป็นในการแสดงไอคอนให้เราทราบ ในส่วนต่อไปนี้ เราจะเรียนรู้วิธีติดตั้งไลบรารีที่จำเป็นและวิธีใช้งานเพื่อแสดงไอคอนในแอปพลิเคชันของเรา บริการแรกของเราคือ MatIconRegistry ซึ่งเป็นรีจิสทรีที่ช่วยให้เราสามารถระบุและกำหนดนามแฝงสำหรับไอคอนโดยใช้บริการที่สามารถแทรกได้ ไอคอนนี้ใช้งานง่ายมาก แต่จำเป็นต้องนำเข้าคำสั่งนี้ไปยังโปรเจ็กต์หรือโมดูลรูทที่เราต้องการแสดง เริ่มคำสั่งดังกล่าวข้างต้นบนพรอมต์คำสั่งของคุณเพื่อสร้างโครงการเชิงมุมใหม่ โปรดลองใช้คำสั่งใดคำสั่งหนึ่งด้านล่างเพื่อให้แน่ใจว่ามีการติดตั้งไลบรารี่ที่จำเป็นทั้งหมดในโครงการของเรา โดยเฉพาะอย่างยิ่งสำหรับนักพัฒนาที่สามารถใช้ไลบรารีและโมดูลได้โดยตรงในแอปพลิเคชันของเรา โดยไม่ต้องจัดการกับขั้นตอนในการเพิ่มไลบรารีและโมดูลไปยังโมดูลรูท

Mat-icon Svg

mat- icon svg เป็นกราฟิกแบบเวกเตอร์อย่างง่ายที่สามารถใช้แทนไอคอนหรือโลโก้ได้ กราฟิกสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ และสามารถแก้ไขหรือเปลี่ยนแปลงได้อย่างง่ายดาย

การใช้องค์ประกอบ mat-ion วัสดุเชิงมุม เราสามารถสร้าง SVG ในเครื่องได้ เรากำลังฉีดบริการ MatIconRegistry รวมถึง DomSanitizer ในตัวสร้าง ฟังก์ชัน registerIcons() ประกอบด้วยโหลดพารามิเตอร์และ URL ตลอดจนฟังก์ชันส่วนตัวที่เรียกว่าโหลด หากเราใช้รูปแบบนี้ เราจะต้องเพิ่มชื่อไฟล์ภาพเท่านั้น หากคุณใช้สตริง ฟังก์ชันการโหลด icon.service จะแตกต่างออกไปเล็กน้อย ชื่อภาพจะถูกสร้างขึ้นโดยใช้ดัชนีเป็นคีย์สำหรับชื่อภาพในฟังก์ชันโหลด ต้องเปิดใช้งานบริการนี้เมื่อแอปพลิเคชันเริ่มโหลด การอ่านและบำรุงรักษาโค้ดทำได้ง่ายกว่ามากเพราะสามารถอ่านได้ง่ายกว่ามาก เราได้แบ่งรูปภาพออกเป็นส่วนๆ และมีบริการที่เรียบง่ายขึ้น