17: Bygningsværktøj - IcoMoon - CSS-tricks

Anonim

Udtrykket "byggeværktøj" kan være skræmmende. Det tænker på smarte kommandolinjeværktøjer, der kræver konfiguration og underlige systemafhængigheder, der går i stykker, når du ser forkert på dem. Nogle gange er byggeværktøjer sådan, og vi går der i denne serie. Men virkelig er et buildværktøj bare noget, der hjælper med at gøre din proces lettere. Automatiser noget, du tidligere lavede i hånden.

IcoMoon er i den forstand et byggeværktøj. Det var (er) et populært værktøj til opbygning af brugerdefinerede ikonskrifttyper. Det er vidunderligt for det. Jeg støtter ethvert værktøj, der opmuntrer frontend-devs til at oprette tilpassede, strømlinede aktiver til netop det, de har brug for i stedet for at inkludere køkkenvasken (hvert ikon på jorden) og bare bruge bits af det. IcoMoon er ikke kun for @ font-face ikon skrifttyper, men det kan output SVG defs blokke, som det kalder en SVG sprite (også et helt acceptabelt udtryk).

Dybest set klikker du rundt på de ønskede ikoner og eksporterer det, og du får en perfekt SVG-defs-blok til brug. Bemærk, at de ikke bruger endnu, og jeg er ikke sikker på hvorfor, men det betyder, at du bliver nødt til at medtage viewBoxog tilgængeligheds ting alene, når du implementerer dem. Tilmeld dig en konto der, og du kan gemme projektet, hvilket betyder at du kan komme tilbage og fjerne / tilføje ting efter behov i stedet for at starte fra bunden. Det gør det virkelig til et byggeværktøj.

Vigtigt at vide om IcoMoon: du kan tilføje din egen SVG. Du er ikke begrænset til det, du ser i standardappen. Du kan hente SVG andre steder og bare tilføje det der, og det gemmer med dit projekt. Du kunne bruge IcoMoon som et byggeværktøj med kun din egen brugerdefinerede SVG, og det ville stadig være nyttigt.