14: SVG-ikonsystem - Udbygning af defs - CSS-tricks

Indholdsfortegnelse

Det element er kobling til hele denne idé om en inline SVG ikon system. Vi lærte, at en ren måde at gøre det på er at placere alt, hvad du agter at tegne senere, i en blok, så det ikke gengives, og vi kan henvise til dem senere (fortæl dem browseren at tegne det ikon).

I denne video vil vi bruge lidt tid på at bygge vores egen blok i hånden. Det er ikke særlig svært, og jeg tror, ​​kører hjem, hvordan alt dette fungerer.

Vi kommer til at gøre det fra SVG, som vi finder forskellige steder på nettet. Vi tager en fra The Noun Project, en fra IcoMoon og en fra Shutterstock. Vi gør vores due diligence med at åbne SVG, rette eventuelle underlige figurer, sætte lærredstørrelsen op og hvad ikke. Der er ingen grænse her for, hvor denne vektorinformation kan komme fra. Disse tre kilder er bare for at vise dig, at SVG kan komme fra hvor som helst vektor.

Senere vil vi forhåbentlig forenkle denne proces, men det er altid nyttigt at forstå møtrikkerne og skruerne i, hvordan det fungerer. Du ved aldrig, hvornår du bliver nødt til at grave dybere (f.eks. For at finde ud af, hvorfor noget ikke fungerer korrekt).

Interessante artikler...