SVGR, SVG dosyalarınızı React bileşenlerine dönüştürmek için kullanabileceğiniz bir araçtır. Bu sayede SVG dosyalarınızı daha kolay yönetebilir ve özelleştirebilirsiniz. SVGR, SVG dosyalarınızı dönüştürürken birçok özelleştirme seçeneği sunar. Örneğin, SVG dosyalarınızı optimize edebilir, SVG dosyalarınızı JSX’e dönüştürebilir, SVG dosyalarınızın boyutunu ayarlayabilir ve SVG dosyalarınızın renklerini değiştirebilirsiniz.
5 Adımda SVG Dosyanızı React Bileşenine Dönüştürme: SVGR Kullanımı Rehberi
İlk olarak, SVGR kütüphanesini bir örnek proje içinde nasıl kuracağımızı ve kullanabileceğimizi anlamak için, SVGR aracını anlaşılır kılacak bir senaryo üzerinden örnek kod bloklarıyla ilerleyeceğiz.
1. React Projesi Oluşturma (Next.js)
SVGR kullanımına geçmeden önce hemen alttaki komutla bir react projesi oluşturalım
1 | npx create-next-app@latest |
Üstteki komut için benden istenen parametrelere verilen cevap
Yeni bir react projesini üstteki komut yardımıyla oluşturduktan sonra /src klasörünün altı buna benzer bir görüntüye sahip olacaktır ama react sürümüne ve projeyi oluştururken ki tercihlerinize göre bu görüntü değişebilir.
📦src
┗ 📂app
┃ ┣ 📜favicon.ico
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┗ 📜page.tsx
2. SVG Dosyalarını İçeren Dizin Oluşturun
Yeni bir react projesini oluşturduktan sonra hemen örneğimizde kullanacağımız react logosu olan alttaki svg görselini kullanacağız.
1 2 3 4 5 6 7 | <?xml version="1.0" encoding="utf-8"?> <svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="nonzero" clip-rule="nonzero" d="M4.84989 2.37195C4.59895 2.51683 4.33488 2.91636 4.30424 3.78785C4.28968 4.20181 3.9423 4.52559 3.52835 4.51103C3.11439 4.49647 2.79061 4.1491 2.80516 3.73514C2.84273 2.66673 3.1806 1.60366 4.09989 1.07291C5.02179 0.540653 6.11484 0.782356 7.06128 1.28727C7.42674 1.48224 7.56495 1.93656 7.36998 2.30201C7.17501 2.66747 6.72069 2.80568 6.35524 2.61072C5.5818 2.1981 5.10158 2.22663 4.84989 2.37195ZM8.87139 3.67284C9.19036 3.40858 9.66315 3.45293 9.92741 3.7719C10.4818 4.44103 11.0136 5.20405 11.4963 6.04018C12.5366 7.84191 13.178 9.68785 13.3509 11.2362C13.4372 12.0091 13.4108 12.7446 13.2303 13.3754C13.0484 14.011 12.6941 14.5863 12.0999 14.9293C11.381 15.3444 10.5509 15.2855 9.79114 15.0089C9.02868 14.7313 8.24395 14.2056 7.49586 13.5228C7.18993 13.2435 7.16831 12.7691 7.44756 12.4632C7.72681 12.1573 8.20119 12.1356 8.50712 12.4149C9.16624 13.0165 9.78567 13.4105 10.3043 13.5994C10.8257 13.7892 11.1537 13.7436 11.3499 13.6303C11.5143 13.5354 11.6797 13.342 11.7882 12.9627C11.8981 12.5787 11.9328 12.0529 11.8602 11.4026C11.7152 10.1045 11.1591 8.45607 10.1973 6.79018C9.75492 6.02396 9.27081 5.33055 8.77232 4.72886C8.50807 4.40989 8.55242 3.93709 8.87139 3.67284Z" fill="#000000"/> <path fill-rule="nonzero" clip-rule="nonzero" d="M14.5 8.20557C14.5 7.91581 14.286 7.48735 13.5466 7.02507C13.1954 6.80549 13.0887 6.34276 13.3083 5.99154C13.5279 5.64032 13.9906 5.53361 14.3418 5.75319C15.2483 6.31993 16 7.14407 16 8.20557C16 9.27009 15.2442 10.0958 14.3337 10.663C13.9821 10.882 13.5195 10.7746 13.3005 10.423C13.0815 10.0714 13.189 9.60887 13.5405 9.38985C14.2846 8.92635 14.5 8.4962 14.5 8.20557ZM11.3626 11.0378C11.432 11.4462 11.1572 11.8335 10.7488 11.9029C9.89219 12.0484 8.96547 12.1274 8 12.1274C5.91954 12.1274 4.00018 11.76 2.57286 11.1355C1.86032 10.8238 1.23659 10.4332 0.780529 9.9615C0.320977 9.48616 0 8.89166 0 8.20557C0 7.37549 0.466082 6.68599 1.08548 6.16636C1.70712 5.64485 2.55471 5.22808 3.52013 4.92164C3.91494 4.79633 4.33657 5.01479 4.46189 5.40959C4.5872 5.80439 4.36874 6.22603 3.97394 6.35135C3.12334 6.62134 2.4724 6.96078 2.04954 7.31553C1.62442 7.67217 1.5 7.97899 1.5 8.20557C1.5 8.39536 1.58476 8.6353 1.85895 8.91891C2.13663 9.20613 2.57464 9.49905 3.17409 9.76131C4.37076 10.2848 6.07639 10.6274 8 10.6274C8.88475 10.6274 9.72732 10.5549 10.4976 10.424C10.906 10.3547 11.2933 10.6295 11.3626 11.0378Z" fill="#000000"/> <path fill-rule="nonzero" clip-rule="nonzero" d="M4.87192 13.6303C5.12286 13.7752 5.6009 13.8041 6.37095 13.3949C6.73673 13.2005 7.19082 13.3395 7.38519 13.7052C7.57957 14.071 7.44062 14.5251 7.07484 14.7195C6.13079 15.2211 5.04121 15.4601 4.12192 14.9293C3.20003 14.3971 2.86282 13.3296 2.82687 12.2575C2.81299 11.8435 3.13733 11.4967 3.55131 11.4828C3.96529 11.4689 4.31215 11.7932 4.32603 12.2072C4.35541 13.0834 4.62023 13.485 4.87192 13.6303ZM3.98778 9.49712C3.59944 9.35301 3.40145 8.92138 3.54556 8.53304C3.84786 7.71839 4.24274 6.8763 4.72548 6.04018C5.76571 4.23845 7.04361 2.75996 8.29806 1.83609C8.92431 1.37487 9.57441 1.02999 10.211 0.870901C10.8524 0.71059 11.5278 0.729863 12.1219 1.07291C12.8408 1.48795 13.2049 2.23634 13.3452 3.03257C13.486 3.83168 13.4232 4.77409 13.2058 5.7634C13.1169 6.16796 12.7169 6.42388 12.3124 6.33501C11.9078 6.24613 11.6519 5.84612 11.7408 5.44155C11.9322 4.56992 11.9637 3.83647 11.868 3.29288C11.7717 2.7464 11.5681 2.48524 11.3719 2.37195C11.2076 2.27705 10.9574 2.23049 10.5747 2.32614C10.1871 2.42301 9.71442 2.65588 9.18757 3.04388C8.13584 3.81846 6.98632 5.12428 6.02452 6.79018C5.58214 7.55639 5.22369 8.32235 4.95185 9.0549C4.80774 9.44323 4.37611 9.64122 3.98778 9.49712Z" fill="#000000"/> <path d="M9.45925 8.06618C9.45925 8.81694 8.85063 9.42556 8.09987 9.42556C7.34911 9.42556 6.7405 8.81694 6.7405 8.06618C6.7405 7.31542 7.34911 6.70681 8.09987 6.70681C8.85063 6.70681 9.45925 7.31542 9.45925 8.06618Z" fill="#000000"/> </svg> |
src klasörü altında icons adında yeni bir klasör oluşturalım ve üstte paylaştığım örnek svg kodunu alarak react.svg adında yeni dosyayı icons klasörü altına kaydedelim. Eklediğimiz icons klasörü ve react.svg dosyası sonrası projemiz şu yapıda olacaktır.
📦src
┣ 📂app
┃ ┣ 📜favicon.ico
┃ ┣ 📜globals.css
┃ ┣ 📜layout.tsx
┃ ┗ 📜page.tsx
┗ 📂icons
┃ ┗ 📜react.svg
3. @svgr/cli Aracını Kullanarak SVG’yi React Bileşenine Dönüştürün
Şimdi gelelim svgr cli aracını kullanarak bu react.svg görselini nasıl React bileşenine çevireceğimize yani asıl makalenin konusuna geçelim. Biz svgr komutunu sıklıkla kullanacağımız için package.json adlı dosya içerisine scripts altına svgr adında yeni bir task oluşturuyoruz. Bu task’a ait komuta ve detayına alttaki koddan göz atabilirsiniz.
1 2 3 4 5 6 7 8 | { ... "scripts": { ... "svgr": "npx @svgr/cli src/icons --out-dir src/components/ --ext tsx" }, ... } |
Üstteki @svgr/cli aracını local ya da global yükleme aksiyonu almadan doğrudan npx komutu ile çalıştırıyoruz. Siz isterseniz projeye ya da sisteminize global olarak @svgr/cli adlı paketi yükleyip aynı komutu çalıştırabilirsiniz. @svgr/cli pakete ufak bir değinmek istiyorum. src/icons parametresi ile svg görselleriniz yolunu belirtiyorum. –out-dir ile ise React bileşenin nereye oluşturulacağını söylüyorum son olarak –ext parametresi ile tsx uzantılı dosya oluşturmasını istiyorum.
4. SVG Bileşenlerini Projede Kullanın
src/app dizini altında yer alan page.tsx dosyamızı açıyoruz ve alttaki 2 satırı ekliyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 | import { React } from '@/components' // Eklenecek 1.satır ... export default function Home() { return ( <main className="flex min-h-screen flex-col items-center justify-between p-24"> ... <React width="320" height="320" /> // Eklenecek 2.satır ... </main> ) } |
5. Projeyi Başlatın
Tarayıcınızda sonuçları görmek için aşağıdaki komutu kullanın:
1 2 3 | npm run dev veya yarn dev |
Sonuç
Altta Next.js üzerinde gördüğünüz React logosu svg’den dönüştürme işlemini gerçekleştirdiğimiz React bileşeni.
Bu adımları takip ederek, @svgr/cli aracını kullanarak 5 adımda SVG dosyanızı react bileşenine bönüştürme işlemini gerçekleştirebilirsiniz ve projenizde kullanabilirsiniz. Bu yöntem, SVG dosyalarınızı hızlı bir şekilde yönetmenize ve kullanmanıza olanak tanır. SVGR aracını daha çok react-native projelerimde tercih ediyorum. Siz isterseniz web projesinde isterseniz de mobil react-native projenizde gönül rahatlığı ile kullanabilirsiniz.
📚 5 Adımda SVG Dosyanızı React Bileşenine Dönüştürme Kaynakları
📚 Benzer Makaleler
- React memo() Nedir, Neden Kullanılır?
- React Fragment Nedir, Örnekli Nasıl Kullanılır?
- React Native Nedir? Ortam Nasıl Kurulur?
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından 5 Adımda SVG Dosyanızı React Bileşenine Dönüştürme konulu makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
