تحويل SVG إلى مكوّنات React Native — Numio

متى تستخدمها

• تحويل أيقونة مُصدَّرة من Figma أو Sketch إلى مكوّن لتطبيق Expo أو React Native يستخدم react-native-svg.
• تقليص ملف SVG متضخم (عناوين، بيانات وصفية من المحرر، defs غير مستخدمة) قبل شحنه كمكوّن أصلي.

طريقة الاستخدام

1. الصق ترميز SVG في محرر SVG أو أفلت ملف .svg؛ يجب أن يكون الإدخال SVG صالحًا وإلا ظهرت الرسالة "This is not a valid svg code."
2. افتح SVGO Settings لإيقاف التحسين أو تبديل إضافات منفردة مثل remove title أو remove view box أو merge paths؛ وتقارن المعاينة أسفل المحرر بين SVG الأصلي والمحسَّن.
3. انسخ مخرجات لوحة React Native إلى ملف .js أو .tsx وثبّت react-native-svg في تطبيقك.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Check</title>
  <g fill="none" stroke="#16a34a" stroke-width="2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M7 12.5l3 3 7-7"/>
  </g>
</svg>

import * as React from "react"
import Svg, { G, Circle, Path } from "react-native-svg"
const SvgComponent = (props) => (
  <Svg
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    {...props}
  >
    <G fill="none" stroke="#16a34a" strokeWidth={2}>
      <Circle cx={12} cy={12} r={10} />
      <Path d="m7 12.5 3 3 7-7" />
    </G>
  </Svg>
)
export default SvgComponent

التفاصيل والقيود

يعمل تحسين SVGO في Web Worker داخل متصفحك، لكن توليد JSX يجري على الخادم: يُرسَل SVG المحسَّن إلى /api/svg-to-jsx، الذي يشغّل SVGR مع native: true.

تُحذف العناصر التي لا يدعمها react-native-svg، ويضيف SVGR تعليقًا مثل /* SVGR has dropped some elements not supported by react-native-svg: filter */.

يضمّن SVGO قواعد <style> داخل العناصر ثم يحوّل تصريحات style إلى سمات، فيصبح style="stroke:blue" هو stroke="#00f" (الخاصية stroke). ويُحذف <title> افتراضيًا.

تُحفظ width وheight وviewBox، ويُنشر {...props} على عنصر Svg الجذري لتتمكن من تجاوز الحجم أو اللون.

FAQ

أدوات ذات صلة

المواصفات والمراجع

• SVGR: React Native
• react-native-svg on GitHub