اغلب اوقات، توسعه دهندگان تمایل دارند تصاویر svg را به فهرست دارایی ها اضافه کنند و آنها را مستقیماً یا به عنوان یک جزء React وارد کنند. این فرآیند نه تنها اندازه بسته نرم افزاری شما را افزایش می دهد، بلکه مدیریت همه دارایی ها را نیز دشوار می کند.
اگر راهی برای مدیریت تمام نمادهای برنامه مانند روشی که آنها را از هر کتابخانه آیکون دیگری وارد می کنیم وجود داشته باشد، چه می شود؟
بله، react-svgr به شما کمک می کند تمام آیکون های برنامه React خود را مدیریت کنید.
SVGR چیست؟
SVGR یک ابزار جهانی برای تبدیل SVG به اجزای React است.
SVGR یک SVG خام می گیرد و آن را به یک جزء آماده برای استفاده React تبدیل می کند.
مثال،
نماد svg خام،
پس از اجرای SVGR، کامپوننت واکنش زیر را دریافت می کنیم.
چگونه از SVGR استفاده کنیم؟
-
زمین بازی SVGR
زمین بازی SVGR به ما کمک می کند تا تصویر svg خود را به صورت آنلاین به کامپوننت react تبدیل کنیم. سپس می توانیم این کامپوننت را برای استفاده بیشتر در برنامه react خود کپی-پیست کنیم.
-
SVGR کلیک کنید
زمین بازی SVGR تنها در صورتی مفید است که آیکون های کمی برای تبدیل داشته باشیم. اما با SVGR cli می‌توانیم یک فایل یا یک فهرست کامل را تبدیل کنیم.
می تواند نصب کند@svgr/cliبه صورت محلی در پروژه ما:
npm install --save-dev @svgr/cli
# or use yarn
yarn add --dev @svgr/cli
- با تعیین فایل به عنوان آرگومان واحد، یک فایل را تبدیل می کند.
npx @svgr/cli -- assets/icons/menu-icon.svg
- تبدیل یک دایرکتوری کامل یک دایرکتوری کامل را با استفاده از تغییر شکل می دهد
--out-dirگزینه. تمام SVG های موجود در این درخت دایرکتوری به اجزای React تبدیل می شوند.
npx @svgr/cli --out-dir dist -- icons
یک اسکریپت برای تبدیل دسته ای بنویسید
با کمک @svgr/cli ما می توانیم به سادگی یک اسکریپت بنویسیم که می تواند به سادگی این فرآیند را بیشتر کند.
- اسکریپت جدید را بنویسید
package.json،
- ايجاد كردن
svgr.config.jsفایل روی اهرم ریشه با پیکربندی زیر،
- اکنون خوب است که دستور زیر npm را اجرا کنیم تا تمام آیکون های svg خود را به اجزای react تبدیل کنیم.
npm run icon:create
و بیشتر…
- Hybrowlabs را برای خدمات توسعه برنامه React بررسی کنید.
