Üç ikonu birleştirmek
home.svg, search.svg, settings.svg
Her biri orijinal viewBox'ı korunmuş <symbol id="home">, <symbol id="search"> ve <symbol id="settings"> içeren tek bir sprite.svg.
SVG Sprite Üretici
Birden fazla SVG ikonunu tek bir sembol tabanlı sprite sayfasında birleştirin, kullanıma hazır bir örnekle.
Bu araç işinize yaradı mı?
Bu araç hakkında
Bir düzine SVG ikonunu ayrı dosyalar olarak kullanan bir sayfa bir düzine istek demektir; bir sprite sayfası bir istek demektir. Onları `<use>` ile referanslanan `<symbol>` elemanlarında birleştirmek standart kalıptır — bu araç elinizdeki ikon dosyalarından bir tane oluşturur, bir build aracına ihtiyaç duymadan.
Nasıl kullanılır
- Birden fazla SVG ikon dosyası yükleyin.
- Birleştirilmiş sprite ve bir kullanım örneği otomatik olarak üretilir.
- Sprite dosyasını kopyalayın veya indirin, ve ilk ikon için kullanım parçacığını kopyalayın (id'sini sprite'taki başka bir ikonla değiştirin).
Örnekler
Sık karşılaşılan sorunlar
- İki ikon sprite'ta aynı id ile sonuçlanıyor.
- İkon id'leri dosya adından türetilir — iki dosya bir ad paylaşıyorsa (farklı klasörlerden gelmiş gibi), ikincisi ilkinin üzerine sessizce yazmak yerine otomatik olarak ek alır ("icon-2").