14: System ikon SVG - budowanie def - CSS-Tricks

Anonim

Elementem jest sprzęgło do tej całej idei inline układu ikon SVG. Dowiedzieliśmy się, że czystym sposobem na zrobienie tego jest umieszczenie wszystkiego, co zamierzasz narysować później, w bloku, aby nie renderował się i możemy się do nich później odwołać (powiedz przeglądarce, aby narysowała tę ikonę).

W tym filmie poświęcimy trochę czasu na ręczne budowanie własnego bloku. Nie jest to szczególnie trudne i myślę, że jak to wszystko działa, prowadzi do domu.

Zrobimy to z SVG, które znajdujemy w różnych miejscach w sieci. Pobieramy jedną z The Noun Project, jedną z IcoMoon i jedną z Shutterstock. Dokładamy należytej staranności, otwierając SVG, poprawiając wszelkie dziwne kształty, dopasowując rozmiar płótna i tak dalej. Nie ma tutaj ograniczeń co do tego, skąd mogą pochodzić te informacje wektorowe. Te trzy źródła mają tylko pokazać, że SVG może pochodzić z dowolnego wektora.

Miejmy nadzieję, że później uprościmy ten proces, ale zrozumienie zasad jego działania jest zawsze przydatne. Nigdy nie wiesz, kiedy będziesz musiał kopać głębiej (np. Aby dowiedzieć się, dlaczego coś nie działa prawidłowo).