17: Byggeverktøy - IcoMoon - CSS-triks

Innholdsfortegnelse

Begrepet "byggeverktøy" kan være skummelt. Det tenker på fancy kommandolinjeverktøy som krever konfigurasjon og rare systemavhengigheter som går i stykker når du ser feil på dem. Noen ganger er byggeverktøy slik, og vi kommer dit i denne serien. Men egentlig er et byggeverktøy bare noe for å gjøre prosessen enklere. Automatiser noe du tidligere gjorde for hånd.

IcoMoon, i så måte, er et byggeverktøy. Det var (er) et populært verktøy for å bygge egendefinerte ikonskrifter. Det er fantastisk for det. Jeg støtter ethvert verktøy som oppfordrer frontend devs til å lage tilpassede, strømlinjeformede eiendeler for akkurat det de trenger i stedet for å inkludere kjøkkenvasken (hvert ikon på jorden) og bare bruke biter av den. IcoMoon er ikke bare for @ font-face-ikonfonter, men det kan sende SVG-defs-blokker, som det kaller en SVG-sprite (også et helt akseptabelt begrep).

I utgangspunktet klikker du deg rundt på ikonene du ønsker, og eksporterer den, og du får en perfekt SVG defs-blokk å bruke. Merk at de ikke bruker ennå, og jeg er ikke sikker på hvorfor, men det betyr at du må inkludere viewBoxog tilgjengelighets ting på egenhånd når du implementerer dem. Registrer deg for en konto der, så kan du lagre prosjektet, noe som betyr at du kan komme tilbake og fjerne / legge til ting etter behov i stedet for å starte fra bunnen av. Det gjør det virkelig til et byggeverktøy.

Viktig å vite om IcoMoon: du kan legge til din egen SVG. Du er ikke begrenset til det du ser i standardappen. Du kan få SVG fra andre steder og bare legge det til der, og det vil lagre med prosjektet ditt. Du kan bruke IcoMoon som et byggeverktøy med bare din egen tilpassede SVG, og det vil fortsatt være nyttig.

Interessante artikler...