svg fixer

SVG Fixer

- v3.0.0 ตอนนี้เร็วขึ้น 11x แล้วขอบคุณ @ericfennis, ดู #89

- V2.0.0 ลบ Canvas & JSDOM ไม่ต้อง npm install

พยายามแก้ไข SVG ของคุณโดยเปลี่ยนเป็นเส้นทางเติม / เดี่ยว (และทำให้ตัวอักษรเข้ากันได้เป็นโบนัส)

แปลงจังหวะ SVG เป็นเติมเต็ม

---

---

เอกสารการติดตั้งและคำแนะนำการใช้งาน

ดูเอกสารการติดตั้งและการใช้งานเต็มรูปแบบที่นี่

วัตถุประสงค์

ฉันต้องการแปลง svg icons เป็น fonts โดยใช้เครื่องมือเช่น iComoon.io, Fontello.com และ WebFont

ปัญหา / ทำไม

หาก SVG containts ของคุณ strokes หรือแท็กใด ๆ นอกเหนือจาก path เดียวเช่น line rect polygon ฯลฯ คุณจะได้รับข้อผิดพลาดเหล่านี้เมื่อพยายามแปลงเป็นแบบอักษร

---

ตัวอย่าง

SVG

Icon -> เราจะใช้ในตัวอย่างนี้

Code -> สำหรับไอคอน

< svg
xmlns= " http://www.w3.org/2000/svg "
width= " 24 "
height= " 24 "
viewBox= " 0 0 24 24 "
fill= " none "
stroke= " currentColor "
stroke-width= " 2 "
stroke-linecap= " round "
stroke-linejoin= " round " >
< rect x = " 3 " y = " 3 " width = " 18 " height = " 18 " rx = " 2 " ry = " 2 " />
< line x1 = " 9 " y1 = " 9 " x2 = " 15 " y2 = " 15 " />
< line x1 = " 15 " y1 = " 9 " x2 = " 9 " y2 = " 15 " />
</ svg >

---

ข้อผิดพลาด

เมื่อเราพยายามแปลง SVG นี้เป็นตัวอักษรโดยใช้เครื่องมือการแปลง SVG To Font หนึ่งในตัวอักษรเราจะได้รับข้อผิดพลาดต่อไปนี้

ข้อผิดพลาด icomoon.io	ข้อผิดพลาด fontello.com	ข้อผิดพลาดของเว็บฟอน

ไม่สนใจข้อผิดพลาด

เกิดอะไรขึ้นถ้าคุณเพิกเฉยต่อข้อผิดพลาดเหล่านี้? แพ็คแบบอักษรที่มีไอคอนจะออกมา "corrupt/incorrect" ซึ่ง different than expected หรือ not even render at all (ว่าง)

ผลลัพธ์จากการเพิกเฉยต่อข้อผิดพลาด

ไอคอนไม่แสดงหรือแสดงผลในแพ็คแบบอักษรเมื่อเราเพิกเฉยต่อข้อผิดพลาดและเพียงแค่สร้างแบบอักษรต่อไป

iComoon.io ว่างเปล่า	fontello.com ว่างเปล่า	Webfont ว่างเปล่าโดยใช้ fontdrop.info เพื่อดูตัวอย่างตัวอักษร

การแก้ปัญหา

ฉันสร้าง package นี้เพื่อแก้ปัญหานี้ตอนนี้คุณสามารถ "fix" ไอคอน SVG เพื่อทำแบบอักษรที่เข้ากันได้โดยเรียกใช้ผ่าน SVGFixer

แก้ไขไอคอน

ไอคอนในแพ็คแบบอักษรหลังจากที่เราเรียกใช้ผ่าน SVGFixer()

iComoon.io แก้ไขแล้ว	fontello.com แก้ไขแล้ว	webfont แก้ไขโดยใช้ fontdrop.info เพื่อดูตัวอย่างตัวอักษร

---

แก้ไขรหัส SVG

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.620 2.025 C 4.212 2.105,4.087 2.139,3.870 2.227 C 2.989 2.585,2.321 3.364,2.076 4.320 C 1.993 4.647,1.992 19.351,2.076 19.677 C 2.357 20.776,3.117 21.553,4.260 21.915 C 4.439 21.971,5.243 21.979,11.820 21.990 C 16.818 21.998,19.268 21.989,19.453 21.960 C 20.643 21.777,21.620 20.876,21.924 19.680 C 22.007 19.352,22.008 4.648,21.924 4.323 C 21.617 3.126,20.660 2.233,19.480 2.043 C 19.234 2.003,4.819 1.986,4.620 2.025 M19.340 4.066 C 19.455 4.105,19.603 4.201,19.701 4.299 C 20.025 4.623,20.000 3.977,20.000 12.000 C 20.000 20.023,20.025 19.377,19.701 19.701 C 19.377 20.025,20.023 20.000,12.000 20.000 C 3.975 20.000,4.623 20.025,4.298 19.700 C 3.974 19.376,3.998 20.028,4.010 11.918 L 4.020 4.700 4.131 4.511 C 4.256 4.298,4.449 4.136,4.670 4.057 C 4.793 4.013,6.104 4.003,11.983 4.002 C 18.548 4.000,19.162 4.006,19.340 4.066 M8.643 8.069 C 8.291 8.193,8.000 8.614,8.000 9.000 C 8.000 9.080,8.030 9.234,8.066 9.343 C 8.123 9.517,8.276 9.685,9.354 10.770 L 10.577 12.000 9.354 13.230 C 8.276 14.315,8.123 14.483,8.066 14.657 C 7.936 15.046,8.021 15.423,8.299 15.701 C 8.577 15.979,8.954 16.064,9.343 15.934 C 9.517 15.877,9.685 15.724,10.770 14.646 L 12.000 13.423 13.230 14.646 C 14.315 15.724,14.483 15.877,14.657 15.934 C 15.046 16.064,15.423 15.979,15.701 15.701 C 15.979 15.423,16.064 15.046,15.934 14.657 C 15.877 14.483,15.724 14.315,14.646 13.230 L 13.423 12.000 14.646 10.770 C 15.724 9.685,15.877 9.517,15.934 9.343 C 16.064 8.954,15.979 8.577,15.701 8.299 C 15.423 8.021,15.046 7.936,14.657 8.066 C 14.483 8.123,14.315 8.276,13.230 9.354 L 12.000 10.577 10.770 9.354 C 9.685 8.276,9.517 8.123,9.343 8.066 C 9.102 7.985,8.877 7.986,8.643 8.069 " stroke="none" fill="black" fill-rule="evenodd"></path></svg>

---