Geomicons - ชุดไอคอน SVG ที่เขียนด้วยมือไม่เหมือนใคร

ชุดไอคอนของเว็บกำลังกลายเป็นบรรทัดฐานสำหรับการออกแบบเว็บสมัยใหม่อย่างรวดเร็ว พวกเขาเป็นสินทรัพย์ขนาดใหญ่สำหรับนักออกแบบเว็บไซต์เช่นนี้ ไอคอนสามารถปรับแต่งผ่าน CSS และปรับขนาดโดยไม่มีการสูญเสียคุณภาพ.

แต่ไอคอนแพ็คบางตัวอาจรู้สึกป่องและใหญ่เกินไปสำหรับไซต์ขนาดเล็ก นั่นคือสิ่งที่ Geomicons ส่องแสงจริงๆ.

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

หน้า Geomicons หลักมีการสาธิตเต็มรูปแบบของไอคอนทั้งหมด พวกเขาค่อนข้างเรียบง่ายและเป็นไปตามสไตล์การออกแบบสีเดียวแบบดั้งเดิมที่เราทุกคนคุ้นเคย.

แต่ข้อมูลการตั้งค่าของพวกเขาขาดไปอย่างแน่นอนในหน้าตัวอย่าง หากคุณต้องการเรียนรู้วิธีตั้งค่านี้คุณจะต้องไปที่ GitHub repo เพื่อรับคำแนะนำ.

โดยค่าเริ่มต้นนี้ ไลบรารีจะถือว่าคุณทำงานกับ CSS / JS เพื่อให้ไอคอนเหล่านี้ฝังอยู่ในองค์ประกอบของหน้าโดยตรง แต่เมื่อคุณดาวน์โหลดไอคอนจาก GitHub คุณจะได้รับไฟล์ SVG ทั้งหมดซึ่งคุณสามารถเพิ่มลงใน HTML ได้โดยตรง.

ปัญหาเดียวก็คือ SVG แบบดิบต้องการการแก้ไขเพิ่มเติม เพื่อเปลี่ยนสีในขณะที่เส้นทาง JS / CSS ให้คุณควบคุมสีผ่านรหัส.

เพียงเพิ่ม geomicons.min.js สคริปต์ในส่วนหัวของคุณและส่งผ่าน ข้อมูลไอคอน คุณลักษณะลงในองค์ประกอบ HTML ไอคอนเหล่านี้จะฝังอัตโนมัติซึ่งคุณสามารถจัดการโดยใช้คลาส CSS.

อีกอย่างที่ฉันชอบเกี่ยวกับ Geomicons ก็คือการรองรับ Node นี่เป็นตัวอย่างข้อมูลจาก repo GitHub:

var geomicons = ต้องการ ('geomicons-open'); var pathData = geomicons.paths.heart; // ส่งคืนค่าแอตทริบิวต์ d ของเส้นทาง var svgString = geomicons.toString ('heart'); // ส่งคืนสตริง SVG

หากคุณไม่คุ้นเคยกับโหนดคุณอาจไม่จำเป็นต้องใช้ข้อมูลโค้ดใด ๆ เช่นเดียวกันกับไอคอน React.js ของไอคอนเหล่านี้.

การได้รับการสนับสนุนสำหรับกรอบงานที่สำคัญยังคงเป็นเรื่องใหญ่ มันเป็นหลักฐานเพิ่มเติมว่า Geomicons มีความหมาย รองรับเว็บไซต์ทุกประเภท โดยเน้นไปที่ประสิทธิภาพก่อน.

หากต้องการให้ไอคอนเหล่านี้ทำการทดสอบคุณสามารถดึงสำเนาผ่านทาง npm หรือดาวน์โหลดโดยตรงผ่าน GitHub.

นอกจากนี้ยังมีชุดไอคอนเค้าร่างที่เรียกว่า Geomicons Wired ที่คุณอาจต้องการทดสอบเช่นกัน.

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