Förlustfri Skalbar Ikoner i att Reagera Native – Arivanandan U – Medium

Förlustfri Skalbar Ikoner i att Reagera Native

SVG är det bästa alternativet för ikoner, men tyvärr Reagerar Native inte inbyggt stöd för SVG-rendering. Även om det finns ett par bibliotek där ute som gör det, vrida ikoner till teckensnitt som gör det mycket enklare att visa clean-cut ikoner med konsekvent mått och dynamisk färg.

Låt oss börja med att få en SVG-bild iconize. Jag ska vara med hjälp av följande:

Om du hade provat några av de verktyg som gör teckensnitt av SVGs som Fontello eller IcoMoon, kanske du har haft problem med några SVG-bilder. För teckensnitt, vi behöver SVGs som inte har strokes i dem. De tar bara fylls.

Min slutresultatet skulle bli så här ikonen för bild-perfekt oavsett storlek / färg vi kanske behöver.

Färg-kan, skalbar ikonen

jag är med InkScape eftersom det är tillgängligt i hela Mac, Windows och Linux och fri. För det första, få din SVG-bild. Om du har mönster i skiss och den kan enkelt exporteras. Det finns också alternativ i Skiss för att exportera endast konturerna, som kan göra kort arbete av det Slag som vi inte vill ha i våra bilder. Det finns ett gäng tjänster för att konvertera JPEG, PNG och andra format till SVG.

En sak att notera är multi-färgade ikoner är inte riktigt en sak. Så om jag var du exporterar över ikonen från Skiss, jag skulle helt enkelt exportera inre flesta linjer och cirklar och lämna cirkulär lavendel bakgrund. Om det visar sig svårt att följa med mig på utvinna våra ikonen med InkScape.

Öppna upp SVG i InkScape och välj det andra alternativet i den vänstra rutan Redigera Banor av Nod (F2). Markera alla de banor som du behöver genom att hålla ned skift-tangenten och vänster klicka på dem. Om de linjer som råkar vara osynliga för någon anledning helt enkelt att hålla muspekaren över det område där de skulle visa konturer. Nu skär ut ditt urval. Låt oss ta bort det som var kvar. Välj allt annat på skärmen, välj markeringsverktyget (första på den vänstra panelen / F1) och ta bort. Klistra in markeringen som du skär ut tidigare.

Ikonen efter att ta bort bakgrunden

Höger klicka och Gruppera dem.

Du kan leka lite med detta för att se vad som händer. I grund och botten, om du anger Stroke färg och se din bild för att fylla upp så, då är det inte redo för omställning till ett typsnitt. Skift + Ctrl + F tar upp det.

Det Slag vi inte vill ha.

Välj din bild och klicka på Väg meny och välja ” Stroke Path. Efter det kan du prova att ta bort färger för Stroke och välj en färg för att Fylla i och se om ikoner färg upp med bara Fylla färgen.

Konvertera Slag för att Vägen från XML-redigerare

I mitt fall fungerade det inte. Så jag har att komma in i XML-redigerare som vuxit upp med Shift + Ctrl + X. Välj var och en av de vägar som har Stroke på dem och konvertera dem till Banor genom att trycka på Ctrl + Alt + C eller gå in i menyn.

färgerna som du fick från en Stroke, kan du få dem från Fylls nu. SVG är redo att gå in i våra typsnitt!

Stroke Fyller nu!

Nästa upp, måste vi exportera / spara denna bild. Välj den bild som går att Dokumentera Egenskaper på Arkiv-menyn eller tryck på Ctrl + Shift + D. Det alternativ vi letar efter här är ändra storlek på Sidan Innehåll. , Klicka på den och välj ändra storlek på sidan för att rita eller urval. Sedan är det bara att spara som en Vanlig SVG.

Generera de teckensnitt som i sig är ganska enkelt på denna punkt. Du kan helt enkelt gå till IcoMoon s webbplats och Importera dina ikoner och Generera Teckensnitt. Ladda ner med Download-alternativ längst ned till höger. Du får ett par filer. De filer som är av betydelse för oss är det val.json och iconmoon.ttf filer. Det är lite arbete kvar för att få ikoner till ditt projekt. Följ dokumentation på reagera-native-vektor-ikoner git.

Tid att bygga upp vår ikon komponent!


räkna>

koden ovan gör såväl enkla som ikoner med som en kuliss i bakgrunden. Att göra gradienter är bara så enkelt. Allt du behöver göra är att ersätta den för komponenten med importerade LinearGradient komponent och passerar några färger. Det kan även lätt anpassas för att lägga till skuggor andra fina utsmyckningar.

På mobila

Denna teknik kan användas också i att Reagera. Istället för att importera bilder och hassling med mått och redigering för färger, det är så mycket enklare.

We will be happy to hear your thoughts

Leave a reply