14: SVG-ikonsystem - Bygga ut Defs - CSS-tricks

Anonim

Det elementet är kopplingen för att hela den här idén med en inline SVG ikon system. Vi lärde oss att ett rent sätt att göra det är att placera allt du tänker rita senare i ett block så att det inte återges och vi kan referera till dem senare (be dem att läsaren ska rita den ikonen).

I den här videon kommer vi att spendera lite tid på att bygga vårt eget block för hand. Det är inte särskilt svårt och jag tror att det driver hem hur allt detta fungerar.

Vi kommer att göra det från SVG som vi hittar på olika platser på nätet. Vi tar en från The Noun Project, en från IcoMoon och en från Shutterstock. Vi gör vår aktsamhet för att öppna SVG, fixa alla konstiga former, snugga upp dukstorleken och vad inte. Det finns ingen gräns här för var denna vektorinformation kan komma ifrån. Dessa tre källor är bara för att visa att SVG kan komma från vilken vektor som helst.

Senare kommer vi förhoppningsvis att förenkla denna process, men att förstå muttrarna och bultarna på hur det fungerar är alltid användbart. Du vet aldrig när du behöver gräva djupare (t.ex. för att ta reda på varför något inte fungerar korrekt).