ดาวน์โหลด last icon - ดาวน์โหลดรหัสแหล่ง last icon

last icon

ดาวน์โหลดแบบอักษร

2.2.0

ดาวน์โหลด

สุดท้าย-ไอคอน

ห้องสมุดไอคอนสุดท้ายที่คุณต้องการ

คุณสมบัติที่สำคัญ:

โหลดเป็นไอคอน SVG หรือแบบอักษร
ชุดไอคอน Mix & Match หากจำเป็น
นำไอคอนของคุณมาเอง
แก้ไขไอคอน
ขี้เกียจโหลดไอคอนของคุณ

วิธีใช้

เพียงแค่รวมห้องสมุด

 < script src =" last-icon.js " > </ script >

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

หากคุณสบายดีด้วยความล่าช้าอีกเล็กน้อยคุณสามารถใช้สิ่งนี้แทน (ซึ่งจะถูกละเว้นในเบราว์เซอร์ที่ไม่รองรับโมดูล):

 <!-- preload helps displaying things as early as possible, doesn't work in firefox and safari -->
< link rel =" modulepreload " href =" last-icon.js " />
< script type =" module " src =" ./last-icon.js " > </ script >

และโทรหาไอคอนของคุณ!

 < l-i name =" star " > </ l-i >
< l-i name =" star " set =" tb " > </ l-i >
< l-i name =" star " size =" 32 " set =" tb " > </ l-i >

< l-i name =" star " set =" bx " type =" solid " > </ l-i >
< l-i name =" star " set =" bx " type =" regular " > </ l-i >
< l-i name =" github " set =" bx " type =" logos " > </ l-i >

แนะนำ CSS ต่อไปนี้:

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;
}
l-i svg {
  display : block;
  width : 100 % ;
  height : 100 % ;
}
p l-i ,
button l-i ,
a l-i ,
span l-i {
  vertical-align : -0.125 em ;
}

การกำหนดค่า

คุณสามารถตั้งค่าตัวเลือกใด ๆ โดยใช้ LastIcon.configure วิธีที่แนะนำในการเรียกว่าเป็นวิธีนี้:

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    // Transform stars to trash
    // replaceName: {
    //   star: "trash"
    // },
    // Use font icon
    // fonts: [
    //   "material",
    //   "phosphor",
    // ],
    // Change default set
    defaultSet : "tabler" ,
    // Change default stroke
    // defaultStroke: 1,
  } ) ;
} ) ;

ตัวเลือกที่มีอยู่ทั้งหมด:

ชื่อ	พิมพ์	คำอธิบาย
การดีบัก	`Boolean`	เราควรส่งข้อความไปยังคอนโซล
ขี้เกียจ	`Boolean`	โหลดไอคอนอย่างเกียจคร้าน
ชื่อแทนที่	`Object`	เปลี่ยนไอคอนด้วยค่าอื่น ๆ อย่างโปร่งใส
แบบอักษร	`Array`	ชุดไอคอนโดยใช้ไอคอนแบบอักษรมากกว่า SVG
DefaultSet	`String`	ชุดไอคอนเริ่มต้น
ชุด	`Object.<string, IconSet>`	ชุดไอคอนที่มีอยู่

ชุดไอคอนที่รองรับ

ชุดไอคอน	ชื่อ	นามแฝง	ประเภท	จังหวะ	นับ	เว็บไซต์
ไอคอน bootstrap	รองเท้าบู๊ต	BS	1	x	1800+	รองเท้าบู๊ต
ธง	ธง	ฟลอริด้า	1	x	-	ธง
ฟอนอตอสมมาก	ฟอนอตอสมมาก	เอฟเอ	5	x	1600+	ฟอนอตอสมมาก
ไอคอน	ไอคอน	ใน	1	x	1600+	ไอคอน
ไอคอน	ไอคอน	ip	4	V	2400+	ไอคอน
รลูไรด์	รลูไรด์	ลู	1	V	1800+	รลูไรด์
ไอคอนวัสดุ	วัสดุ	MI	5	x	1100+	ไอคอนวัสดุ
ฟอสเฟอร์	ฟอสเฟอร์	พี.	6	x	9000+	ฟอสเฟอร์
ไอคอนเล็ก ๆ	ซุปเปอร์	เซนต์	1	x	386	ซุปเปอร์
สัญลักษณ์วัสดุ	สัญลักษณ์	MS	3	V	2500+	สัญลักษณ์วัสดุ
ไอคอน tabler	แท็บเลอร์	TI	1	V	5700+	แท็บเลอร์

การเพิ่มหรืออัปเดตชุดไอคอน

คุณสามารถอัปเดตตัวเลือกใด ๆ สำหรับชุดไอคอน

ชื่อ	พิมพ์	คำอธิบาย
นามแฝง	`String`	นามแฝงตัวอักษรสองตัวสั้น
SVGPath	`function`	เส้นทาง SVG
[FixFill]	`Boolean`	ชุดนี้ต้องการการแก้ไข `fill:currentColor` หรือไม่?
[USESTROKE]	`String`	เพิ่มจังหวะลงใน SVG
[DefaultStroke]	`String`	จังหวะเริ่มต้นที่จะใช้ (หากรองรับจังหวะ)
[DefaultType]	`String`	ประเภทเริ่มต้นที่จะใช้ (เมื่อมีหลายประเภท)
[คำนำหน้า]	`Object.<string, string>`	ประเภทคำนำหน้า
[fontclass]	`function`	ชั้นเรียนแบบอักษร
[OpticalFont]	`Boolean`	เป็นแบบอักษรออปติคัลหรือไม่?
[ชื่อ]	`String`	ชื่อเต็ม (ฉีดโดยอัตโนมัติ)

เติม

ชุดไอคอนบางชุดรวมถึงค่าเริ่มต้น fill="currentColor" และบางชุดไม่ได้ เพื่อให้มีชุดไอคอนทั้งหมดทำงานอย่างสม่ำเสมอเราใช้ fill="currentColor" กับชุดไอคอนทั้งหมด การแก้ไขนี้ใช้กับ: 'วัสดุ', 'fontawesome'

ทำไมองค์ประกอบที่กำหนดเอง

สไปรต์ภายนอกหรือฟอนต์กำลังโหลดไอคอนทั้งหมดซึ่งนำไปสู่เวลาโหลดเพิ่มเติม
รวมถึง SVG กำลังนำไปสู่ HTML ที่ยาวมากและไม่ค่อยเป็นมิตรกับนักพัฒนา
ไม่จำเป็นต้องใช้ js inliner ที่กำหนดเองมันให้ความรู้สึกที่สะอาดขึ้นโดยรวม

ทำไม CSS ภายนอก

องค์ประกอบที่กำหนดเอง CSS ไม่ได้ถูกโหลดจนกว่าส่วนประกอบจะถูกโหลดซึ่งสามารถนำไปสู่ FOUC และสิ่งต่าง ๆ ที่เคลื่อนที่ไปรอบ ๆ เมื่อไอคอนปรากฏขึ้น วิธีการแก้ปัญหาที่ฉันพบมาคือการใช้กฎ CSS ทั่วโลกมากกว่าที่รู้จักก่อนที่ส่วนประกอบจะโหลด

คุณสามารถตรวจสอบ SCS พิเศษใด ๆ ที่อาจเป็นประโยชน์สำหรับคุณเช่นกัน

ใช้แบบอักษร

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

ก่อนอื่นให้โหลดสไตล์แบบอักษรที่เกี่ยวข้องใด ๆ

 < link href =" https://fonts.googleapis.com/icon?family=Material+Icons " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Sharp " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Round " rel =" stylesheet " />
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons+Outlined " rel =" stylesheet " />

และหลังจากนั้นให้ใช้การกำหนดค่าแบบอักษรเพื่อบอกไอคอนสุดท้ายเพื่อใช้แบบอักษรผ่านไอคอน SVG

 customElements . whenDefined ( "l-i" ) . then ( ( ) => {
  // Access through registry
  customElements . get ( "l-i" ) . configure ( {
    debug : true ,
    fonts : [ "material" ] ,
    material : {
      defaultType : "two-tone" ,
    } ,
  } ) ;
} ) ;

จากนั้นอัปเดตสไตล์ของคุณ:

 l-i {
  --size : 1 em ;
  display : inline-flex;
  width : var ( --size );
  height : var ( --size );
  vertical-align : middle;

  svg {
    display : block;
    width : 100 % ;
    height : 100 % ;
  }
  i {
    font-size : var ( --size ) !important ;
    color : currentColor;
  }
}
p ,
button ,
a ,
span {
  l-i {
    vertical-align : -0.125 em ;
  }
}

. material-icons-two-tone {
  background-color : currentColor;
  -webkit-background-clip : text;
  -webkit-text-fill-color : transparent;
}