14: SVG Icon System - Defter Dışa Aktarma - CSS Hileleri

Anonim

Eleman bir satır içi SVG simgesi sisteminin bütün bu fikre debriyaj olduğunu. Bunu yapmanın temiz bir yolunun, daha sonra çizmeyi düşündüğünüz her şeyi bir bloğa koymak olduğunu öğrendik, böylece bu blok oluşturmaz ve daha sonra bunlara referans verebiliriz (tarayıcıya bu simgeyi çizmesini söyleyin).

Bu videoda kendi bloğumuzu elle inşa etmek için biraz zaman harcayacağız . Özellikle zor değil ve bence tüm bunların nasıl çalıştığını eve götürüyor.

Web'de farklı yerlerde bulduğumuz SVG'den yapacağız. The Noun Project'ten bir tane, IcoMoon'dan bir tane ve Shutterstock'tan bir tane alıyoruz. SVG'yi açmak, garip şekilleri düzeltmek, tuval boyutunu küçültmek vb. Konularda gerekli özeni gösteriyoruz. Bu vektör bilgisinin nereden gelebileceği konusunda burada bir sınır yoktur. Bu üç kaynak, size SVG'nin her yerden gelebileceğini göstermek içindir.

Daha sonra bu süreci basitleştireceğimizi umuyoruz, ancak nasıl çalıştığını anlamak her zaman yararlıdır. Ne zaman daha derine inmeniz gerekeceğini asla bilemezsiniz (örneğin, bir şeyin neden doğru çalışmadığını anlamak için).