Geliştiriciler genellikle SVG'yi doğrudan JSX'e ekler. Bunun kullanımı kolaydır ancak JS paket boyutunu artırır. Optimizasyon arayışı içinde, paketi karmaşıklaştırmadan SVG simgelerini kullanmanın başka bir yolunu bulmaya karar verdim. SVG sprite'larının ne olduğu, nasıl kullanılacağı ve onlarla çalışmak için hangi araçların mevcut olduğu hakkında konuşacağız. Teoriden başlayarak, adım adım bir SVG sprite oluşturan bir komut dosyası yazacağız ve ve için eklentileri tartışarak sonlandıracağız. vite webpack SVG Sprite Nedir? Bir görüntü grafiği, tek bir görüntüye yerleştirilen görüntülerin koleksiyonudur. SVG Sprite ise içine sarılmış ve içine yerleştirilmiş bir SVG içeriği koleksiyonudur. <symbol /> <svg /> Örneğin basit bir SVG kalem simgemiz var: Bir SVG hareketli grafiği elde etmek için etiketini ile değiştireceğiz ve onu harici olarak ile saracağız: <svg /> <symbol /> <svg /> Artık bu bir SVG hareketli grafiği ve içinde olan bir simgemiz var. id="icon-pen" Tamam ama bu simgeyi HTML sayfamıza nasıl yerleştireceğimizi bulmalıyız. Simgenin kimliğini belirten etiketini özelliğiyle birlikte kullanacağız ve bu öğeyi SVG'nin içinde kopyalayacağız. <use /> href nasıl çalıştığına dair bir örneğe bakalım: <use /> Bu örnekte iki daire var. Birincisi mavi bir çerçeveye sahip, ikincisi ise ilkinin kopyası ancak kırmızı dolgulu. SVG sprite'ımıza geri dönelim. kullanımıyla birlikte şunu elde edeceğiz: <use /> Burada kalem simgemizin bulunduğu bir düğmemiz var. Şu ana kadar da kodu olmayan bir simge kullandık. Sayfada birden fazla düğmemiz varsa, bu durum HTML düzenimizin boyutunu birden fazla etkilemeyecektir çünkü tüm simgeler SVG sprite'ımızdan gelecektir ve yeniden kullanılabilir olacaktır. <button /> SVG Sprite Dosyası Oluşturma dosyasını karmaşıklaştırmamak için SVG sprite'ımızı ayrı bir dosyaya taşıyalım. Öncelikle bir dosyası oluşturun ve içine bir SVG sprite yerleştirin. Bir sonraki adım, içindeki özelliğini kullanarak simgeye erişim sağlamaktır: index.html sprite.svg <use/> href SVG Sprite Oluşturmayı Otomatikleştirme Simge kullanımında çok fazla zaman kazanmak için bu işlem için bir otomasyon ayarlayalım. Simgelere kolay erişim sağlamak ve onları istediğimiz gibi yönetmek için, her birinin kendi dosyasında ayrılması gerekir. Öncelikle tüm simgeleri aynı klasöre koymalıyız, örneğin: Şimdi bu dosyaları alan ve bunları tek bir SVG grafiğinde birleştiren bir komut dosyası yazalım. Projenizin kök dizininde dosyasını oluşturun. generateSvgSprite.ts kitaplığını yükleyin: Glob npm i -D glob kullanarak her simge için bir dizi tam yol elde edin: globSync Şimdi, her dosya yolunu yineleyeceğiz ve Node'un yerleşik kitaplığını kullanarak dosya içeriğini alacağız: fs Harika, her simgenin SVG koduna sahibiz ve artık bunları birleştirebiliriz, ancak her simgenin içindeki etiketini etiketiyle değiştirmeli ve gereksiz SVG niteliklerini kaldırmalıyız. svg symbol DOM gösterimini elde etmek için SVG kodumuzu bazı HTML ayrıştırıcı kütüphaneleriyle ayrıştırmalıyız. kullanacağım: node-html-parser'ı SVG kodunu ayrıştırdık ve SVG öğesini gerçek bir HTML öğesiymiş gibi elde ettik. Aynı ayrıştırıcıyı kullanarak, öğesinin alt öğelerini öğesine taşımak için boş bir öğesi oluşturun: svgElement symbol symbol Çocukları çıkardıktan sonra, ve özelliklerini de almalıyız. olarak ikon dosyasının ismini belirleyelim. svgElement id viewBox id Artık bir SVG hareketli grafiğine yerleştirilebilecek bir öğemiz var. Bu nedenle, dosyaları yinelemeden önce değişkenini tanımlayın, öğesini bir dizeye dönüştürün ve aktarın: symbol symbols symbolElement symbols Son adım, SVG grafiğinin kendisini oluşturmaktır. “Kök”te ve alt öğeler olarak semboller bulunan bir dizeyi temsil eder: svg const svgSprite = `<svg>${symbols.join('')}</svg>`; Aşağıda bahsedeceğim eklentileri kullanmayı düşünmüyorsanız, oluşturulan hareketli grafiğin bulunduğu dosyayı statik bir klasöre koymanız gerekir. Paketleyicilerin çoğu klasör kullanır: public fs.writeFileSync('public/sprite.svg', svgSprite); Ve işte bu; komut dosyası kullanıma hazır: // generateSvgSprite.ts import { globSync } from 'glob'; import fs from 'fs'; import { HTMLElement, parse } from 'node-html-parser'; import path from 'path'; const svgFiles = globSync('src/icons/*.svg'); const symbols: string[] = []; svgFiles.forEach(file => { const code = fs.readFileSync(file, 'utf-8'); const svgElement = parse(code).querySelector('svg') as HTMLElement; const symbolElement = parse('<symbol/>').querySelector('symbol') as HTMLElement; const fileName = path.basename(file, '.svg'); svgElement.childNodes.forEach(child => symbolElement.appendChild(child)); symbolElement.setAttribute('id', fileName); if (svgElement.attributes.viewBox) { symbolElement.setAttribute('viewBox', svgElement.attributes.viewBox); } symbols.push(symbolElement.toString()); }); const svgSprite = `<svg>${symbols.join('')}</svg>`; fs.writeFileSync('public/sprite.svg', svgSprite); Bu betiği projenizin kök dizinine yerleştirebilir ve ile çalıştırabilirsiniz: tsx npx tsx generateSvgSprite.ts Aslında burada kullanıyorum çünkü eskiden her yerde TypeScript'te kod yazıyordum ve bu kütüphane TypeScript'te yazılmış düğüm komut dosyalarını çalıştırmanıza izin veriyor. Saf JavaScript kullanmak istiyorsanız şunu çalıştırabilirsiniz: tsx node generateSvgSprite.js Şimdi betiğin ne yaptığını özetleyelim: Herhangi bir dosyası için klasörüne bakar. .svg src/icons Her simgenin içeriğini çıkarır ve ondan bir sembol öğesi oluşturur. Tüm sembolleri tek bir <svg />. klasörde dosyası oluşturur. public sprite.svg Simge Renkleri Nasıl Değiştirilir Sık karşılaşılan ve önemli bir durumu ele alalım: renkler! Simgenin bir hareketli grafik haline geldiği bir komut dosyası oluşturduk ancak bu simge, proje boyunca farklı renklere sahip olabilir. Yalnızca öğelerinin dolgu veya kontur niteliklerine sahip olabileceğini değil aynı zamanda , , ve diğer öğelerin de olabileceğini aklımızda tutmalıyız. Bize yardımcı olacak çok kullanışlı bir CSS özelliği var - . <svg/> path circle line currentcolor Bu anahtar kelime, bir öğenin renk özelliğinin değerini temsil eder. Örneğin, olan bir öğe üzerinde rengini kullanırsak, bu öğenin arka planı kırmızı olur. background: currentcolor color: red Temel olarak, her kontur veya dolgu öznitelik değerini olarak değiştirmemiz gerekir. Umarım bunun manuel olarak yapıldığını görmüyorsunuzdur, heh. Hatta SVG dizelerini değiştirecek veya ayrıştıracak bazı kodlar yazmak bile çok kullanışlı bir araç olan ile karşılaştırıldığında çok verimli değildir. currentcolor svgo Bu, yalnızca renkler konusunda değil aynı zamanda SVG'deki gereksiz bilgilerin kaldırılmasında da yardımcı olabilecek bir SVG optimize edicidir. yükleyelim: Svgo'yu npm i -D svgo yerleşik eklentileri vardır ve bunlardan biri, özelliğine sahip olan . Bu SVG çıktısını kullanırsak renkleri ile değiştirecektir. ile birlikte kullanımı şöyledir: svgo currentColor: true convertColors currentcolor convertColors svgo import { optimize } from 'svgo'; const output = optimize( '<svg viewBox="0 0 24 24"><path fill="#000" d="m15 5 4 4" /></svg>', { plugins: [ { name: 'convertColors', params: { currentColor: true, }, } ], } ) console.log(output); Ve çıktı şöyle olacaktır: <svg viewBox="0 0 24 24"><path fill="currentColor" d="m15 5 4 4"/></svg> Bir önceki bölümde yazdığımız sihirli scriptimize ekleyelim: svgo // generateSvgSprite.ts import { globSync } from 'glob'; import fs from 'fs'; import { HTMLElement, parse } from 'node-html-parser'; import path from 'path'; import { Config as SVGOConfig, optimize } from 'svgo'; // import `optimize` function const svgoConfig: SVGOConfig = { plugins: [ { name: 'convertColors', params: { currentColor: true, }, } ], }; const svgFiles = globSync('src/icons/*.svg'); const symbols: string[] = []; svgFiles.forEach(file => { const code = fs.readFileSync(file, 'utf-8'); const result = optimize(code, svgoConfig).data; // here goes `svgo` magic with optimization const svgElement = parse(result).querySelector('svg') as HTMLElement; const symbolElement = parse('<symbol/>').querySelector('symbol') as HTMLElement; const fileName = path.basename(file, '.svg'); svgElement.childNodes.forEach(child => symbolElement.appendChild(child)); symbolElement.setAttribute('id', fileName); if (svgElement.attributes.viewBox) { symbolElement.setAttribute('viewBox', svgElement.attributes.viewBox); } symbols.push(symbolElement.toString()); }); const svgSprite = `<svg xmlns="http://www.w3.org/2000/svg">${symbols.join('')}</svg>`; fs.writeFileSync('public/sprite.svg', svgSprite); Ve betiği çalıştırın: npx tsx generateSvgSprite.ts Sonuç olarak SVG hareketli grafiği, özelliğine sahip simgeler içerecektir. Ve bu simgeler projenin her yerinde istediğiniz renkle kullanılabilmektedir. currentColor Eklentiler Elimizde bir script var ve onu istediğimiz zaman çalıştırabiliyoruz ama manuel olarak kullanmamız biraz sakıncalı. Bu nedenle, dosyalarımızı izleyebilecek ve hareket halindeyken SVG sprite'ları oluşturabilecek birkaç eklenti öneririm: .svg ( kullanıcıları için) vite-plugin-svg-spritemap vite Bu, temelde bu makalede az önce oluşturduğumuz betiği içeren eklentim. Eklentinin değişimi varsayılan olarak etkindir, böylece eklentiyi oldukça kolay bir şekilde kurabilirsiniz. currentColor // vite.config.ts import svgSpritemap from 'vite-plugin-svg-spritemap'; export default defineConfig({ plugins: [ svgSpritemap({ pattern: 'src/icons/*.svg', filename: 'sprite.svg', }), ], }); ( kullanıcıları için) svg-spritemap-webpack-eklentisi webpack Vite'a geçene kadar bu Webpack eklentisini kullandım. Ancak Webpack kullanıyorsanız bu eklenti hala iyi bir çözümdür. Renk dönüşümünü manuel olarak etkinleştirmelisiniz; şu şekilde görünecektir: // webpack.config.js const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin'); module.exports = { plugins: [ new SVGSpritemapPlugin('src/icons/*.svg', { output: { svgo: { plugins: [ { name: 'convertColors', params: { currentColor: true, }, }, ], }, filename: 'sprite.svg', }, }), ], } Mizanpajda Kullanım bir örnek vereceğim ama çoğunlukla HTML ile ilgili olduğu için istediğiniz yere uygulayabilirsiniz. Dolayısıyla, derleme klasörümüzde bulunduğundan, hareketli resim dosyasına erişebilir ve temel bileşenini oluşturabiliriz: React'ta sprite.svg Icon const Icon: FC<{ name: string }> = ({ name }) => ( <svg> <use href={`/sprite.svg#${name}`} /> </svg> ); const App = () => { return <Icon name="pen" />; }; Nihai Sonuç Dolayısıyla, simgelerle yapılan birçok manuel çalışmayı önlemek için her şeyi özetleyerek şunları yapıyoruz: projedeki düzenli simgeleri istenen adlarla kolayca kaydedebilir ve saklayabilir tüm simgeleri ayrı bir dosyada tek bir hareketli grafikte birleştiren, paket boyutunu azaltan ve bu simgeleri projenin herhangi bir yerinde kullanmamıza olanak tanıyan bir komut dosyasına sahip olmak simgeleri gereksiz özelliklerden uzak tutmamıza ve kullanım yerinde renkleri değiştirmemize yardımcı olan kullanışlı bir araca sahibiz oluşturma sürecinin bir parçası olarak simge dosyalarımızı izleyebilecek ve hareket halindeyken sprite oluşturabilecek bir eklentiye sahip olmak üstünde kiraz olan bir Icon bileşeni var Çözüm Geliştirmede verimlilik yalnızca zamandan tasarruf etmekle ilgili değildir; bu, yaratıcı potansiyelimizin kilidini açmakla ilgilidir. Simgeleri yönetmek gibi hassas görevleri otomatikleştirmek yalnızca bir kısayol değildir; daha sorunsuz, daha etkili bir kodlama deneyimine açılan bir kapıdır. Bu tür rutin işlerde zaman kazanarak daha karmaşık görevlere odaklanabilir ve bir geliştirici olarak daha hızlı büyüyebilirsiniz.
