Svg Sprite'ları Simge Olarak Kullanma

Bir SVG hareketli grafiği, bir SVG görüntüleri koleksiyonu içeren bir XML dosyasıdır. Görüntüler, bir web sitesinde veya bir mobil uygulamada simgeler veya çizimler olarak kullanılabilir. Her görüntü ayrı bir öğede bulunur ve XML dosyası, simgelerin çevrimdışı kullanılabilmesi için önbelleğe alınabilir. Bir SVG hareketli grafiğini kullanmak için XML dosyasının belgeye yüklenmesi gerekir. Görüntüler daha sonra öğenin kimliğine atıfta bulunularak kullanılabilir. Örneğin, bir kedi görüntüsünü kullanmak için, XML dosyası belgeye yüklenecek ve görüntüye kimliği ile başvurulacaktır: Kedi görüntüsü, kimliğe atıfta bulunularak belgede herhangi bir yerde kullanılabilir: Görüntü, CSS ile biçimlendirilebilir ve konum ve boyut 'x' ve 'y' nitelikleriyle kontrol edilebilir: Bu dosyaların özellikle logolar, diyagramlar ve simgeler için yararlı olmasının birkaç nedeni vardır. Tipik olarak, bir sembol ve bir resim, a.svg dosyası aracılığıyla ayrı resimler olarak tanımlanır. Diğer bir seçenek de, birden çok sva görüntüsüne tek bir sva dosyası eklemektir. Piksel konumlarını hesaplamak ve CSS kodu oluşturmak için kullanılabilecek birkaç araç vardır. Tek bir öğenin bir sayfada use öğesiyle kaç kez kullanılabileceği konusunda bir sınır yoktur. Harici resimler, IE11 veya altı gibi daha eski tarayıcılarda görüntülenmeyecektir. HTML işaretleme hatalarından kaçınmak için en iyi alternatif, tam SVG'yi HTML işaretlemesine eklemek ve hedefini kullanarak her Sprite'a referans vermektir. Her bir karaktere bir hareketli grafik sınıfı atanır ve yerleşik CSS, onlara varsayılan olarak şunu gösterme talimatı verir: Ölçeklenebilir grafiklerin oluşturulması için iki yol vardır: elle veya bir program aracılığıyla. İkinci durumda, tek bir kod satırı gereklidir. Bir vektör görüntü programı kullanırken, simgelerinizi sanal bir çizim tahtasına çizer ve çeşitli şekiller, renkler ve yol manipülasyonu kullanarak bunları değiştirirsiniz. Bu durumda, resimler *svg etiketi kullanılarak doğrudan bir HTML belgesine yazılabilir. Bir VS kodunuz, tercih ettiğiniz IDE'niz varsa veya HTML kullanıyorsanız, SVG görüntüsünü bir HTML öğesi olarak kullanarak belgenize dahil edebilirsiniz. Tüm adımları doğru yaptıysanız, aşağıda gösterilene benzer bir sayfa oluşturabilirsiniz. Ölçeklenebilir görüntüler içeren vektör grafik dosyaları, SVG dosyaları olarak bilinir. Görüntü formatları söz konusu olduğunda, çeşitli bağlamlar kullanılabilir. SVG görüntüleri oluşturun. *img veya *svg gibi HTML öğeleri, SVG görüntüleri kullanılırken tarayıcılar tarafından desteklenir. Svg Dosyaları Simge Olarak Kullanılabilir mi? Kredi: svgrepoÖlçeklenebilir Vektör Grafiklerinin (SVG'ler) ana avantajı, web sitenizde simgeler olarak kullanılabilmesidir. çünkü onlar vektörel grafiklerdir. Vektör grafikleri herhangi bir boyutta ölçeklendirilebilir ve aynı yüksek kaliteye sahiptir. Bu dosyalar küçük olduğundan ve iyi sıkıştırıldığından, sonuç olarak web sitenizin yüklenmesi yavaş olmayacaktır. Ölçeklenebilir Vektör Grafikleri (SVG), bir vektör görüntü formatı kullanılırken Genişletilebilir İşaretleme Dili (XML) sözdizimi kullanılarak çizilebilir. Sabit boyutlu bir piksel görüntünün aksine bir SVG, doğrudan bir tarayıcıda görüntülenebilen ve işlenebilen bir XML kod bloğudur. Kelimelerden çok daha küçük olabilen resimler çok daha özlüdür ve eylemleri ve bilgileri çok daha hızlı gösterebilir. Tamagotchis, iMac'ler ve Palm Pilot'ların evlerimize girmesiyle aynı zamana kadar SVG görüntü dosyası formatı web için kullanılabilir hale geldi. Genel olarak, çoğu web tarayıcısı SVG biçimlerini desteklemiyordu ve bundan habersizdi. Ancak 2017 yılına kadar web tarayıcıları, destek eksikliği nedeniyle SVG'yi işlemekte zorluk çekiyordu. Bir simge web yazı tipi veya vektör tabanlı bir tür kullandığınızda, ölçekleme ile ilgili herhangi bir sorun yaşamayacaksınız. Hazır simge setleri, konu simgeleri tasarlamaya geldiğinde size daha sınırlı tasarım seçenekleri sunar. Daha çok yönlü bir şey oluşturmak istiyorsanız bir svg dosyası seçin. Bir el aracıyla veya bir yazılım programıyla bir SVG simgesi oluşturulabilir. Bir vektör görüntü programı kullanılarak sanal bir çizim tahtasına bir simge çizilebilir. Daha sonra tamamlanmış olan.svg dosyasını dışa aktarabilirsiniz. Bu Evernote listesinden de ücretsiz SVG simgeleri alabilirsiniz. Bir şeklin boyutları genişliği ve yüksekliği ile belirlenirken, konumu x ve y ile belirlenir. Ayrıca, sınıf adlarını ve stili içeren ayrı bir stil sayfası oluşturarak her bir öğenin stilini tanımlayabilirsiniz. Ycode kodsuz oluşturucunun yardımıyla, bu simgelerin renklerini değiştirebileceğiniz gibi arka plan rengini de değiştirebilirsiniz. Çok yönlü, ölçeklenebilir ve kullanımı basit bir görüntü formatına ihtiyacınız varsa, svega kullanmayı düşünmelisiniz. Animasyon ve şeffaflık yetenekleri nedeniyle hem kişisel hem de ticari projeler için idealdir. İnsanların çoğu, daha yaygın biçimler yerine SVG kullandığından, eski cihazlarda veya tarayıcılarda desteklenmeyebilir. Svg Sprites'ı Nasıl Kullanırım?SVG sprite'ları, bir site için yapılan HTTP isteklerinin sayısını azaltmanın harika bir yoludur. Birden çok görüntü içeren tek bir dosyadır ve her görüntüye öğe kullanılarak erişilebilir. Örneğin, üç görüntü içeren "sprite.svg" adlı bir dosyanız varsa, ve öğelerini kullanarak her görüntüye erişebilirsiniz: SVG-sprite, çeşitli SVG'leri en düşük düzeyde hareketli görüntülere dönüştüren bir Node.js modülüdür. . Paket, eski CSS'de veya başlıca önişlemci biçimlerinden birinde (Sass, Less ve Stylus) stil sayfaları oluşturmak için bir dizi Mustache şablonu içerir. Standart API'yi kullanmayı tercih ederseniz, Grunt veya Gulp sarmalayıcılarını kullanarak hayatınızı kolaylaştırabilirsiniz. Varsayılan olarak üç tür Sprite vardır: mod, grup ve bireysel. Aynı anda farklı yerlerde çıkış modunu kapatmak mümkündür. Önişlemci biçimlerinden birinde (Sass, LESS, Stylus, vb.) bir CSS Sprite ve stil sayfası oluştururken, özel hususların farkında olmalısınız. >title> ve >description> gibi öğeleri içeren YAML dosyasını SVG'nize ekleyin. Çeşitli çıktı biçimleriyle çalışmanıza izin veren, komut satırı sürümüne eksiksiz bir komut satırı aracı dahildir. Bu, herhangi bir tasarımın önemli bir parçasıdır ve bir markayı veya ürünü temsil etmek için kullanılabilir. Bir şirketin simgeleri, özellikle akıllı telefonlar ve tabletler söz konusu olduğunda hem tanınabilir hem de ölçeklenebilir olmalıdır. SVG kullanarak bir simge oluşturmak için, önce simge sınıfınızı temsil eden *svg> öğesini ekleyin ve ardından svg dosyasında, href niteliğini ve ardından bir octothorpe (ok) ifadesini içeren *use** öğesini ekleyin. ve son olarak simge adı. Aşağıdaki kod kullanılarak bir blog gönderisi başlığı örneği oluşturulabilir: “CSS ve SVG kullanarak basit bir SVG simgesi nasıl yapılır” svg class=”icon-title”> br>br> *xlink:href=#icon-post -title #iconposttitle Bu adımları izleyerek kolayca basit bir SVG simgesi oluşturabilirsiniz. */octothorpe> Svg Simgelerini Neden KullanmalısınızSVG Sprite'larını Nasıl Kullanırım? SVG, bağımsız görüntülerde kullanılabilmenin veya HTML'ye gömülebilmenin yanı sıra kullanılabilir. Internet Explorer 9 ve üzeri dahil olmak üzere tüm büyük tarayıcılarda çalışır. Neden sva ikonları kullanmalıyız? Satır içi SVG simgeleri, dosyalarınıza bazı kodlamalar ekler, böylece sakıncası yoksa bunları kullanabilirsiniz. SVG simgeleri hem normal hem de retina ekranlarda harika görünecek. Bu önemliyse, yazı tipi simgeleri yerine satır içi SVG simgelerini kullanın. SVG simgeleri, NET simgelerine tercih edilir. Sprite'ı React'te nasıl kullanıyorsunuz? '../letters' kaynağından yinelenen içe aktarmalar; '../reacts' kaynağından yinelenen içe aktarmalar. LetterSvg'yi içe aktarın. svg; giriş '. Harf bir scs olarak anılır. (harf, renk, boyut) (svg className=svg-letter) Harf türüne göre dolguyu doldurun. Href=*$*Harfler*#letter-$letter=/svg); letterSvg.propTypes = harf: React.Types.string, renk: React. letterSvg.default.Props'u dışa aktarırken, harf(A) color:#f5f5f5f5', size: 20'yi seçin; ve dışa aktarma varsayılanı letterSvg'yi kullanın; letter: 'A'Bir Svg Simgesini Nasıl Kullanırım? Bir SVG simgesini kullanmak için Adobe Illustrator, Inkscape veya Sketch gibi bir vektör düzenleme programına sahip olmanız gerekir. Simgenizi oluşturduktan sonra, onu bir SVG dosyası olarak kaydedebilirsiniz. Simgeyi bir web sitesinde kullanmak için, SVG dosyasını HTML kodunuza gömebilirsiniz. Simgeler, HTML ve CSS'de çeşitli şekillerde bulunabilir, ancak bunlar en yaygın olarak Kaliop'un ön uç geliştirme ekibinde kullanılır. Yuvarlak şekilleri göz önünde bulundurarak şekillerin kenarları arasına biraz daha mesafe koyun. Düşük ekranlarda (çözünürlüğünüz uygun aralığa ayarlanmışsa) en iyi sonuçları elde etmek için yalnızca piksel sığdırma boyutlarını belirtmek gerekir. Tasarım aracı tarafından oluşturulan bir görüntüyü dışa aktarırken, biraz işaretleme ve meta veriye sahip olması yaygın bir durumdur. Ayrıca, yol verileri (d özelliğinde) son derece kesin olabilir. Koddan önce ve sonra neyin kaldırıldığını veya basitleştirildiğini görmek için SVGOMG gibi bir araç kullanın. Kaynakta sabit kodlanmış dolgularımız varsa, bu renkleri CSS kodumuzdan değiştiremeyiz, bu nedenle tek renkli simgelerde bu seçeneğin bulunmadığından emin olun. Manuel olarak bir hareketli grafik oluşturuyorsanız, ayrı bir klasör tutmalısınız. bireysel SVG simgelerinizi içerir. Stil vermeniz gerekmeyen çizimlerin tek bir SVG dosyası olarak tutulduğundan emin olun ve <img href=url/to/illustration.svg> alt='> ile sayfanıza ekleyin. Bir görüntüyü canlandırıyorsanız, HTML sayfanıza tam SVG kodunu eklemeniz önerilir. Bazı makaleler, simge deponuzdaki her bir SVG dosyasını etiketlemek için bir metin etiketi kullanmanızı önerir. Bunu biraz JavaScript (svg4everybody,svgxuse) ile doldurun ve çalışacaktır. Alternatif olarak, hareketli grafiğinizi her sayfanın HTML koduna dahil edebilirsiniz. Her yöntemin çok sayıda avantajı ve dezavantajı vardır. Bir Sprite oluşturmanın iki yöntemini birleştirmek, bunu yapmanın en etkili yoludur. SVG stili özelliklerinin büyük bir kısmı ebeveynlerinden devralınır. Strok genişliği özelliğini belirli bir uzunluğa ayarlamak gerekli değildir, ancak simgenin yerel koordinatlarına göre belirli bir değere ayarlamak gereklidir. Yolunuz görünümün sınırlarına ulaşırsa konturun yarısı kesilir. İki farklı dolgu değeriyle (iki renk olarak da bilinir) bir simge oluşturmak için basit bir teknik kullanılabilir. Sayfanızın düzgün bir HTML yapısına sahip olup olmadığını görmek için simgeleriniz büyük ve zor olacaktır. Bu, sayfalarınızın başına eklenebilir. Biraz fazla tatlı ve kısa. Başka bir yaklaşım da, SVG öğelerinizde genişlik ve yükseklik niteliklerini kullanmaktır. Ancak, bu simgeyi CSS'de yeniden boyutlandırmanız gerekirse, bu biraz daha zor olabilir. Kare veya kare simgeler kullanıyorsanız, yüzde değerleri kullanabilirsiniz çünkü bunlar kabaca simgenin genişliğinin yüzdesini gösterir. Degrade dolguları doldurmak için sva gradyan kullanmalıyız. CSS linear-gradient(…), CSS kuralını ihlal ettiği için SVG fill özelliğinde kullanılamaz. SVG dosyasını bir mobil cihazda görüntülüyorsanız, "Resmi Farklı Kaydet"i seçerek onu cihazınızın galerisine de kaydedebilirsiniz. ” SVG dosyalarını cihazınızın galerisine kaydederken gelecekte işinize yarayacaktır. Kullanmayı seçerseniz kendi özel çizimlerinizi hemen başlatabilirsiniz. Neden Svg, Simgeler İçin En İyi Seçenektir SVG, kaliteden ödün vermeden herhangi bir boyuta ölçeklendirmenize izin verdiğinden, simgeler için mükemmel bir seçimdir. Ayrıca, SVG ile, yalnızca simge yazı tiplerinde bulunabilen bir özellik olan bir simgenin her bir bitini değiştirebilir, renklendirebilir veya canlandırabilirsiniz. Piksel ve saydamlıkla çalışıyorsanız, PNG dosyaları SVG dosyalarına tercih edilir. Simgeler İçin Svg mi yoksa Png mi Kullanmalıyım? Vektörel görüntüler oldukları için her boyuta ölçeklendirilebilirler ve üstün görüntü kalitesi sağlarlar. PNG'ler ise olması gerektiği kadar çok tarayıcı tarafından desteklenmiyor. Internet Explorer 8 veya sonraki bir sürümünü kullanmanız gerekiyorsa PNG'leri, kullanmıyorsanız SVG'leri kullanmak en iyisidir. SVG'leri PNG'lere göre kullanmanın, hareketli resimler, resimler veya satır içi SVG'ler gibi çeşitli avantajları vardır. PNG dosyaları iki kat daha büyük olabilir (retina ekranlar için) ve performanstan ödün vermeden (eski tarayıcılara gerek yoktur) boyut boyutları çok daha küçük olabilir (Javascript veya çoklu doldurmaya gerek yoktur). Harika tasarım yeteneklerine rağmen PNG, teslimat, bant genişliği ve erişim söz konusu olduğunda üstesinden gelinmesi zor bir tasarım aracıdır. Çoğu insan, yalnızca şekiller veya tasarımlar gösteriyorlarsa ve bunlarda değişiklik yapmaları gerekiyorsa, SVG'leri kullanmak için pek bir neden görmezler. Her ikisi de güçlü yanlarını sergileme ve vakaları kullanma yeteneğine sahiptir, ancak PNG çok geridedir. Görüntü verileri yerine vektör verileri ile uğraşırken, bir tarayıcı için çok daha fazla çaba gerektirir. Chrome gibi modern tarayıcılar, açılır açılmaz tarayıcıyı 5 ila 7 saniye boyunca tam anlamıyla askıya alan birkaç yüz (pratik olarak 3-500) svg simgesi içeren CMS benzeri sayfalara sahiptir. bir sayfadaki SVG sayısının bir sonucu olarak tarayıcıdaki yük. Bu durumda, SVGS'yi web yazı tiplerine dönüştürmelisiniz. İkinci bir seçenek olarak, düz eski PNG'lere dönün. SVG simgeleri, PNG simgeleriyle aynı kaliteye sahip değildir. Gerçek fotoğraflarla uğraşmak istemiyorsanız, Svg yerine her zaman.html kullanabilirsiniz. Artık modern tarayıcılarda, sunucuya kaydedilebilen ve tarayıcının sunucu yan kodu aracılığıyla istemciye yüklenebilen ücretsiz SVG simgeleri mevcuttur. CSS 3D dönüşümlerini desteklememelerine ek olarak, bir düğmeyle birleştirildiğinde sorunlara neden olabilecek CSS 3D dönüşümlerini desteklemezler. Kaliteden ödün vermeden SVG simgelerini küçültmek veya büyütmek de mümkündür. Simge yazı tipleri ölçeklendikçe genellikle daha az görünür olsalar da genellikle daha az etkilidirler. Son olarak, sVG simgeleri, kullanıcılarla etkileşime giren düğmelere, sekmelere ve diğer öğelere dönüştürülebilir. Öte yandan, simge yazı tipleri genellikle kullanıcı arabirimi öğeleri olarak kullanılmaz. Vektör grafik tasarımı daha popüler hale geldikçe, giderek daha fazla insan simgeleri ve grafikleri için sva'ya yöneliyor. Bununla birlikte, SVG görüntülerinin boyutu JPEG görüntülerinden daha büyük olsa da, daha fazla esnekliğe sahiptirler ve düzenlemeleri daha kolaydır. Ayrıca, kalite kaybı olmadan ölçeklendirilebilirler ve düğmeler, sekmeler ve diğer kullanıcı arabirimi öğelerini oluşturmak için kullanılabilirler. Grafik oluşturmanın daha esnek ve ölçeklenebilir bir yolunu istiyorsanız, svega.Svg Vs. Logolar ve Simgeler İçin Png Daha iyi sonuçlar için sva gibi vektör dosyalarını kullanarak bir logo veya simge oluşturun. İnce ayrıntılar ve dokularla kullanım için çeşitli PNG'ler vardır, ancak SVG'ler daha çok logolar, simgeler ve diğer düz grafikler için kullanılır. Daha eski tarayıcılar SVG'yi desteklemeyebileceğinden, bunun yerine bir PNG kullanmayı düşünebilirsiniz. HtmlSVG'de Svg Sprite Nasıl Kullanılır? Sprite'lar, sayfanız için yapılan HTTP isteklerinin sayısını azaltmanın harika bir yoludur. Sayfanızın dosya boyutunu azaltmak için de harikadırlar. Bunları nasıl kullanacağınız aşağıda açıklanmıştır: İlk olarak, SVG dosyalarınız için bir klasör oluşturun. Ardından, bu klasörde "sprite.svg" adlı bir dosya oluşturun. Bu dosya, tüm SVG simgelerinizi içerecektir. Ardından, HTML dosyanızı açın ve bölüme aşağıdaki kodu ekleyin: … … “/path/to/sprite.svg” ifadesini hareketli grafik dosyanızın yolu ile değiştirin. "icon-name" ifadesini kullanmak istediğiniz simgenin adıyla değiştirin. Şimdi, HTML dosyanızı bir tarayıcıda görüntülediğinizde, belirttiğiniz simgeyi görmelisiniz. XML belgeleri olduklarından, içerik tipinde bir uygulama/svg olmaları önemlidir. SVG dosyanızın içerik türü düzgün tanımlanmadığından, tarayıcınız bunu yorumlayamayabilir. img src=”image.svg”> veya bir CSS arka plan görüntüsü gibi bir SVG kullanıyorsanız ve dosya düzgün bir şekilde bağlantılıysa ve her şey doğru görünüyorsa, ancak tarayıcı bunu göstermiyorsa, bunun nedeni şu olabilir: sunucunuz bir HTML dosyasıyla hizmet veriyor, sayfalar doğrudan SVG öğeleriyle gömülebilir. Uygun içerik türüyle sunulursa, tarayıcınızın SVG dosyanızı yorumlaması mümkün olmalıdır. Svg Sprites: Grafiklerinizi Canlandırmanın En İyi YoluHTML gömme, bir vektör grafik düzenleyicisine ihtiyaç duymadan özel grafikler oluşturmanın basit bir yolunu sağlayabilir. . SVG'nin yanı sıra, hareketli grafikleri kullanarak kolayca hareketli grafikler oluşturabilirsiniz. Svg Karakter Örneği SVG hareketli grafiğine bir örnek, bir sosyal medya simge paketi oluşturmak olabilir. Tek tek simgeler, ayrı SVG dosyaları olarak kaydedilecek ve ardından tüm tek tek simgelere referans verecek bir ana dosya oluşturulacaktır. Ana dosya bir tarayıcıda açıldığında, tek tek simgeler tek bir görüntü olarak görüntülenecektir. Simge yazı tiplerini sevmemize rağmen, bazı dezavantajlar vardır. Gulp kullanarak bir Sprite oluşturmak basittir. Eklentileri sitelerimize bağlarız (bunları global olarak kurarız). Gulpfile:: eklentileri burada bulunabilir. Etiketler sembolünü içeren ansvg dosyasını kurun. Simgelere nerede ihtiyacımız olduğunu belirttiğimizde, küçültülmeleri gerekir. Varlık dizini, varlıkları daha uygun bir konuma yerleştirmenin basit bir yoludur. Simgelerden stiller, dolgu ve kontur niteliklerini kaldırırsanız, css ile belirtilen stilleri görüntüleyemezsiniz. Lütfen görevi tamamlayın ve çalıştırın. Sayfayı eklemelisiniz. Simgeleri Sprite aracılığıyla bağlamak için çalışan bir sistemimiz var, ancak atılması gereken bir adım daha var. Simgeleri Illustrator'dan dışa aktarırsanız, önce piksel ızgarasını etkinleştirmeniz ve ardından simgenin boyutunu ve konumunu ayarlamanız gerekir. Simgeler de konturdan dönüştürülmelidir. Bu, iconmoon belgelerinde yapmanız gereken şeydir. Karakterlerle Dosya Boyutunu Küçültün ve Hızı Artırın Bir hareketli grafik oluşturduğunuzda, aslında uygulamanızda birden çok kez kullanılacak tek bir görüntü oluşturmuş olursunuz. Sonuç olarak, dosya boyutundan tasarruf etmek ve uygulamanızın hızını artırmak için Sprite kullanmak iyi bir fikirdir. React uygulamanızda bir Sprite kullanmak için önce onu projenize içe aktarmalısınız. Bu, projenin package.js dosyasına aşağıdaki satırı ekleyerek gerçekleştirilebilir. Harekete geçmek için https://www.npmjs.com/package/react-svg adresine gidin. Daha sonra LetterSvg sınıfının bir örneğini oluşturmalısınız. Bu derste harf, renk ve harflerin boyutu tartışılacaktır. Argümanınız, hareketli grafiğiniz olarak kullanmak istediğiniz harfin adıdır. Renk argümanı bize hareketli grafiğin ne olacağını söyler. Boyut bağımsız değişkeni, harfin pikselleri olarak tanımlanır. Oluşturulduktan sonra LetterSvg sınıfını kullanarak bir SVG Sprite oluşturun. useHref() yöntemini kullanmak bunu yapmanızı sağlar. Sprite dosyasının URL'si bu yöntemde belirtilmelidir. Karakterin rengini ve boyutunu belirlemek için fill() ve width() yöntemlerini kullanın. Hareketli grafiğinizi kurmayı bitirdikten sonra, onu React uygulamanıza eklemek için addChild() yöntemini kullanabilirsiniz. Bu yönteme eklenecek öğenin adına ihtiyacınız olacak ve bu, öğenin alt öğesi olmalıdır. Son olarak, animate() yöntemini kullanarak Sprite'a animasyon uygulayabilirsiniz. Bu yöntemin parametreleri süre ve hareket hızıdır. Animasyonun bitmesi için geçen süre, animasyonun süresine göre belirlenir. Animasyon türü, hareket hızı parametresi tarafından belirlenir. Animasyonlar için üç seçenek vardır: default, cub-bezier ve animate. Bu durumda, React uygulamanıza yeni bir sprite eklenerek, eklenmesi sayesinde daha dinamik hale getirilebilir. Karakterleri kullanarak bir uygulama kullanıcı arayüzünün geliştirme sürecini hızlandırabilirsiniz. Bu kitaplık, SVG sprite'larınızı oluşturmanızı ve korumanızı kolaylaştırır ve ayrıca kullanımı nispeten kolaydır. Webpack 2.0 için geçiş kılavuzu artık mevcuttur. v0 şubesinin README dosyasında bulunabilir. Hedef web paketi için yapılandırma seçeneği varsayılan olarak belirlenir. Özel davranış ayarlamak istiyorsanız, uygulama modülünüz için bir yol tanımlamak üzere bu yöntemi kullanın. SpriteFilename seçeneklerinde, [yığın adı] kalıbını kullanarak her yığın için birden çok hareketli grafik oluşturabilirsiniz. Bir SVG dosyasına giden mutlak yolu döndüren özel bir işlev, dahil edilen veya kısıtlanan yükleyici kurallarına bağlı olarak çeşitli hareketli görüntüler oluşturabilir. bir özellik olarak Sprite kimliği. Aşağıdaki kod, harfi görüntülemek için karakter kimliğini kullanan basit bir LetterSVG bileşeni oluşturur.