Membuat SVG Dinamis dari Figma menggunakan SVGOMG dan SVGR

Pada tutorial kali ini saya akan membagikan tutorial cara mudah membuat gambar SVG Dinamis yang di ambil dari figma pada React JS

Sebagai Frontend Developer kita pasti familiar dengan tools design seperti figma, kita sering berkolaborasi dengan bagian UI/UX designer untuk mencerjemahkan design yang di buat ke dalam bari Code.

Untuk mempercepat proses Coding bisasanya kita akan menggunakan berbagai cara dan menggunakan berbagai Framework yang bertujuan untuk mempercepat proses coding. selain penggunaan Framework CSS seperti Tailwind CSS, Bootstrap ada beberapa Cara yang cukup mudah dan cepat dalam proses Slicing yaitu dengan menggunakan SVG, tentunya sesuai dengan kubutuhan kita.

Pada kesempatan kali ini saya akan membagikan cara slicing menggunakan SVG yang berisi gambar dan text dinamis khususnya menggunakan Framework React JS.

Tools yang digunakan:

• React JS
• Boxy SVG
• SVGOMG
• SVGR

Saya akan mengubah gambar di bawah ini menjadi Dinamis yaitu foto dan text.

Pertama Buka Boxy SVG dan import file SVG untuk menghilankan Foto dan mengganti Text path menjadi Full Text

Klik menu Element yang ada di bagian paling bawah untuk melihat tag XML gambar

Hapus pattern gambar dan text (karena text dalam bentuk path bukan text)

Untuk menghapus pattern gambar pilih gambar terlabih dahulu dengan selection tool kemudian klik fill pada icon kuas bagian kanan

Klik menu pattern

Klik manage pattern

Klik kanan dan edit pattern

Klik gambar dan klik kanan lalu delete

Delete gambar pada semua pattern

Setelah di delete semua kemudian kembali ke halaman editor

Gambar pattern akan hilang

Kemudian delete semua text yang bersifat dinamis dengan cara klik text lalu delete lalu ketik ulang karena text dalam bentuk path maka kita perlu mengetik ulang sesuai dengan Design

Ketik ulang text

Untuk melihat tag xml klik menu Element yang ada di bagian paling bawah

Text akan menjadi Text bukan path

Setelah selesai mengedit, kita akan mengeksport file svg dengan format SVG. caranya dengan CTR + A lalu pilih edit export

Setelah terexport kemudian upload file ke dalam SVGOMG dengan cara drag & drop. tujuanya adalah supaya SVG menjadi clean

Kemudian buka SVGR lalu paste code SVG dari SVGOMG tadi di SVGR bagian kiri, lalu copy code yang di bagian sebelah kanan (React Component)

Setelah itu buatlah component di dalam React lalu paste code dari SVGR dan sesuaikan namanya

Edit pattern dan tambahkan gambar External atau gunakan Props untuk membuat dinamis Gambar dan text

<pattern
                id="pattern0"
                width={1}
                height={1}
                patternContentUnits="userSpaceOnUse"
            >
                <image width={77} height={76} xlinkHref="https://res.cloudinary.com/dlppzoemc/image/upload/v1664122684/jejakcoding/reactjs/dynamicsvg/UI_Web_App_02-09-Web-Beranda-Ellipse_47_uftmv7.svg" />
            </pattern>
            <pattern
                id="pattern1"
                width={1}
                height={1}
                patternContentUnits="userSpaceOnUse"
            >
                <image width={77} height={76} xlinkHref="https://res.cloudinary.com/dlppzoemc/image/upload/v1664122684/jejakcoding/reactjs/dynamicsvg/UI_Web_App_02-09-Web-Beranda-Ellipse_47_uftmv7.svg" />
            </pattern>
            <pattern
                id="pattern2"
                width={1}
                height={1}
                patternContentUnits="userSpaceOnUse"
            >
                <image width={77} height={76} xlinkHref="https://res.cloudinary.com/dlppzoemc/image/upload/v1664122664/jejakcoding/reactjs/dynamicsvg/UI_Web_App_02-09-Web-Beranda-Ellipse_46_mnwhla.svg" />
            </pattern>

Update style

<style bx:fonts="Poppins">
                {
                    "@import url(https://fonts.googleapis.com/css2?family=Poppins%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B0%2C900%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800%3B1%2C900&display=swap);"
                }
</style>

Menjadi

<style>
                {
                    "@import url(https://fonts.googleapis.com/css2?family=Poppins%3Aital%2Cwght%400%2C100%3B0%2C200%3B0%2C300%3B0%2C400%3B0%2C500%3B0%2C600%3B0%2C700%3B0%2C800%3B0%2C900%3B1%2C100%3B1%2C200%3B1%2C300%3B1%2C400%3B1%2C500%3B1%2C600%3B1%2C700%3B1%2C800%3B1%2C900&display=swap);"
                }
            </style>

Hapus tag

xmlns:bx="https://boxy-svg.com"

Panggil component SVG ke dalam App React

import React from 'react';
import logo from './logo.svg';
import './App.css';
import MySVG from './MySVG';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <div style={{width:600}}>
          <MySVG />
        </div>
      </header>
    </div>
  );
}

export default App;

Selamat, kita sudah berhasil membuat SVG Dinamis

 

Download Repository

https://github.com/mister-coding/Dynamic-SVG-React