Agik Setiawan - September 28, 2022

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:


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

Share


Comments

Post Terkait