17: Bouwtool - IcoMoon - CSS-trucs

Anonim

De term "bouwtool" is misschien eng. Het doet denken aan fraaie opdrachtregelprogramma's die configuratie vereisen en rare systeemafhankelijkheden die breken als je ze verkeerd bekijkt. Soms zijn build-tools zo, en daar gaan we in deze serie naartoe. Maar echt een build-tool is gewoon iets om uw proces gemakkelijker te maken. Automatiseer iets dat u voorheen met de hand deed.

IcoMoon is in die zin een bouwtool. Het was (is) een populaire tool voor het bouwen van aangepaste pictogramlettertypen. Daar is het geweldig voor. Ik steun elke tool die front-end ontwikkelaars aanmoedigt om aangepaste, gestroomlijnde middelen te maken voor precies wat ze nodig hebben, in plaats van de gootsteen (elk pictogram op aarde) op te nemen en er alleen maar stukjes van te gebruiken. IcoMoon is echter niet alleen voor @ font-face icon fonts, het kan ook SVG defs-blokken uitvoeren, die het een SVG-sprite noemt (ook een perfect acceptabele term).

In feite klik je rond op de pictogrammen die je wilt en exporteer je het en je krijgt een perfect SVG defs-blok om te gebruiken. Merk op dat ze nog niet gebruiken , en ik weet niet zeker waarom, maar dat betekent dat je zelf viewBoxdingen moet opnemen en toegankelijkheid moet maken terwijl je ze implementeert. Meld u daar aan voor een account en u kunt het project opslaan, wat betekent dat u terug kunt komen en dingen kunt verwijderen / toevoegen als dat nodig is in plaats van helemaal opnieuw te beginnen. Dat maakt het echt een build-tool.

Belangrijk om te weten over IcoMoon: u kunt uw eigen SVG toevoegen. U bent niet beperkt tot wat u in de standaardapp ziet. U kunt SVG ergens anders vandaan halen en het daar gewoon toevoegen en het zal met uw project worden opgeslagen. Je zou IcoMoon kunnen gebruiken als een bouwtool met alleen je eigen aangepaste SVG en het zou nog steeds nuttig zijn.