Du kan bli en ikon-ninja

Dersom du kommer på et prosjekt hvor den grafiske profilen anbefaler at du bruker line icons med en linjetykkelse på feks. 2px, og du tenker at du er opptatt av kvalitet og tror du får best mulig resultat av å lage de selv i stedet for å bruke et ikonbibliotek, og dersom du er innbilsk og tenker at det er enkelt (selv om du aldri har gjort det før), så slutt å tenk. Punktum. Gå bort og gjør noe annet. Dersom du er dum, sta, eller er slik som meg og tenker likevel at det blir best å lage de selv, så har jeg noen tips til utfordringer du absolutt vil støtte på og bli mindre ung av.

'sketch-ikoner.png'

Når det er line icons så er det veldig fristende å tenke at strokes er en god ide å bruke istedet for fills, siden man tenker at man kan få ikoner som er skalerbare men som samtidig beholder linjetykkelsen på 2px. Altså at en sirkel har en kant på 2px uansett om ikonet er 32x32 eller 16x16. Så da begynner du å lage ikonene med strokes. Blir ferdig med noen og tenker at du er helt rå. Du mestrer absolutt alt og begynner å se etter oppussingsobjekter på nettet.

Du eksporterer ikonene og importerer de inn i en ikon-font-generator, men du finner fort ut at de fleste generatore kun støtter fills, ikke strokes. Du rir videre på den accomplishment-/competency-high’en fra tidligere, så du trår videre og begynner å undersøke mulighetene for å ikke bruke ikon-fonts, og heller feks. svg’er rett i DOM’en, slik som Github anbefaler fom. 2016. Optimistisk etter å ha lest bloggposten om det, fortsetter du å lage ikoner. Du tenker at du har en løsning og at dette løser seg og kan bare bli bedre. Etter å ha laget noen flere ikoner eksporterer du de og åpner de i nettleseren, og du finner ut at ikonene ser annerledes ut i nettleseren enn i Sketch.

Stroke-alignment WTF

Du kaster en tom kaffekopp ut vinduet. Det er visst fordi du har satt at stroken skal være enten på innsiden av shapen eller på utsiden, men ingen nettlesere støtter stroke-alignment i svg enda, og tolker det derfor som center alignment, og ikonene blir en helt annen størrelse og form. Du går gjennom alle ikonene dine og endrer alle strokes til å være center, og samtidig tilpasser størrelsen på alle shapene dine slik at strokene ikke havner på halve pixler.

Betrygget fortsetter du og ferdigstiller alle ikonene og frontender begynner å lage React-komponenten. Det ser tilsynelatende lovende ut og du får styrt fargene på inline svg ikoner med bare css. Du vurderer om du skal legge til ”ikonmaker” som skill på LinkedIn. Du fortsetter å lage ikoner.

Så kommer du over ett ikon (⚠) som ikke kan ha 2px stroke på trekanten rundt og samtidig ha et utropstegn inni som fungerer i 16x16 uten at noe havner på halve pixler. I tillegg finner du ut at du ikke kan tegne et utropstegn med bare strokes fordi den lille prikken faktisk ikke kan tegnes med én stroke. Siden prikken skal være kvadratisk må linjen være 0px lang med en border på 2px. Da bestemmer Sketch seg for at en linje på 0px lengde skal roteres 45 grader. Uakseptabelt.

'0-length line 45deg rotation WTF'

Du liker utfordringer og du bestemmer deg da for at du klarer å drepe begge fluene ved å lage dette ikonet invertert slik at trekanten er fylt og utropstegnet er subtracted fra den fill’en (altså et utropstegn-formet-hull gjennom). Fornøyd, og etter å ha endret LinkedIn skill til ”mester ikonmaker”, sender du det over til frontender.

'Warning absolutely final attempt'

Dessverre finner du ut at pga. fargen på ikonet blir styrt av stroke-property’en i css så legger nettlesere på en stroke rundt hele ikonet, som føkker det opp totalt. Det går heller ikke i css å spesifiere at fargen skal endre både fills og strokes, fordi da bestemmer nettleseren seg for å legge på en tilfeldig fill på alle de andre ikonene som ikke har det. Fills på open paths ser ikke bra ut. Og det ikke mulig i css å vite om et ikon bruker fills eller strokes for å løse det på den siden.

'Open path fills... wtf'

På dette tidspunktet begynner du å lure på om du har tatt et dårlig valg. Men pga. sunk-cost fallacy tenker du at fremtiden sikkert blir bedre av litt ekstra innsats. Du sender en mld og sier at du ikke kommer hjem til middag og fortsetter å undersøke. Du finner ut at det beste alternativet er å gjøre om alle strokes til fills slik at man kan bruke css for endre fargene. Du finner ut at Sketch har en funksjon som heter Convert to outlines som gjør dette for deg. Jubel. Det ser tilsynelatende ganske enkelt og greit ut. Du går gjennom noen ikoner som kun har strokes og konverterer de til fills vha. den funksjonen. Du åpner ikonet i nettleseren og ser at ikonet har riktig form, men av en eller annen fordømt irriterende grunn vises det små hvite trekanter i hjørnene på strokene.

'Triangle fun, wtf'

Du rage quit’er Sketch men tar det ganske rolig og kaster bare et av de ekstra tastaturene ut vinduet. Du trengte det ikke likevel. Du klikker gjennom shapen som Sketch generete og ser at av en eller annen grunn legger Sketch til masse ekstra punkter i vektoren din, spesielt rundt hjørnene. Og for alle slike hjørner hvor shapes overlapper så viser Sketch det fortsatt som svart, men nettlesere tenker at 2 fills som overlapper betyr at man ikke skal ha en fill der. Ergo hvite trekanter. $#%&*.

Du tørker kaffen av skjermen og går tålmodig gjennom alle shapene og sletter alle ekstra punkter som Sketch la til. Eksporterer ikonene på nytt og nå ser det endelig ut til å funke bra. Du har laget et dusin egne ikoner helt selv. Ikonene ligger inline i DOM’en (som er hvordan det er kult å gjøre det i 2016 i frontend-verdenen), og fargen kan styres med css. Success! LinkedIn blir oppdatert med ”Ikon-ninja”.

Du skalerer ned ett line-ikon til 16x16 og ser at siden du gikk bort fra strokes til fills så blir kanten ikke 2px når ikonet er skalert ned. Det kommer på 1px og i tillegg kommer noen detaljer på halve pixler som blir blurry på ikke-retina-skjermer. Kanten nedskaleres det også sammen med ikonet som gjør at ikonet ikke fungerer på andre størrelser enn 32x32 størrelsen som du tegnet alle ikonene i. Du går gjennom skjermbildene dine og finner ut at i 99% av all ikon-bruk er 16x16.

Rolig tar du på deg hodetelefonene dine, setter på regnlyder og går en runde rundt bygget i regnet uten paraply. Du tenker på valget du tok å lage dine egne ikoner. Du lurer på om du er sta eller inkompetent eller om verden egentlig drives av noen skjulte Lizardmen som er besatt av å ødelegge for deg. Du tenker på din evne til å ta valg. Du kommer ikke frem til noe. Du oppdager at du sitter foran Sketch igjen. Du legger til et nytt artboard, kaller det for “16x16 ikoner” og begynner på nytt. Og du fjerner ”Ikon-ninja” på LinkedIn. Du fikk ingen endorsements likevel.

Like what you read? Give Moquan Chen a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.