Alasan Import SVG sebagai React Component

ReactJS Nov 09, 2020

Permasalahan Pertama

Pernah tidak mencoba untuk merubah warna SVG ? Entah kebutuhannya saat pengguna melakukan hover pada element SVG tersebut atau untuk menyesuaikan SVG dengan tema dari situs kita ?

Permasalahan Kedua

Pernah tidak menggunakan SVG sebagai inline element di HTML dan saat dibuka pada browser Chrome, SVG sebagai inline element tidak bisa compatible dengan Chrome dan hanya compatible dengan Firefox ?

Permasalahan Ketiga

Pernah tidak ingin merubah ukuran SVG langsung, namun disaat yang bersamaan juga merubah warna SVG tersebut?

Kalau teman-teman pernah merasakan yang sama dan setelah saya ubek-ubek di interneti akhirnya, ketemulah cara untuk membuat hal-hal tersebut yaitu dengan merubah SVG tersebut menjadi sebuah React Component.

Konteksnya, saat kita menggunakan ReactJS / Create React App, kita bisa mengimport SVG untuk dijadikan sebuah komponen daripada kita harus membuatnya inline element di HTML.

Contoh Inline SVG Component di HTML

 <p className="flex items-center text-font-gray opacity-50">
                  Beranda{" "}
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="w-3 h-3 opacity-100 mx-2"
                    viewBox="0 0 11.384 20.025"
                  >
                    <g
                      id="Group_4034"
                      data-name="Group 4034"
                      transform="translate(1.414 1.414)"
                    >
                      <line
                        id="Line_452"
                        data-name="Line 452"
                        x2="12.099"
                        transform="translate(8.555 8.642) rotate(135)"
                        fill="none"
                        stroke="#596375"
                        strokeLinecap="round"
                        strokeWidth="2"
                      />
                      <line
                        id="Line_453"
                        data-name="Line 453"
                        x2="12.099"
                        transform="translate(8.555 8.555) rotate(-135)"
                        fill="none"
                        stroke="#596375"
                        strokeLinecap="round"
                        strokeWidth="2"
                      />
                    </g>
                  </svg>
                </p>

Kalau kita menggunakan inline element, tentu saja kita bisa menyelesaikan permasalahan pertama dan ketiga. Sayangnya, akan muncul permasalahan kedua dengan tidak compatible svg ke chrome ( saya pernah mengalaminya) dan masalah lain yang muncul adalah kode editor menjadi lebih lebar,dan terlihat jelek karena satu SVG yang menyimpan data path, dan line akan memenuhi kode editor kita.

Sedangkan kalau kita menggunakan tag element img maka

Contoh Import SVG dengan tag element img

import IconSuccess from '../../assets/icons/success-icons.svg'

<img src={IconSuccess} className="w-5/12 mb-6" alt=""/>

Kita benar memecahkan masalah Kedua, namun timbul masalah pertama dan ketiga karena kita tidak bisa merubah warna pada SVG tersebut.

Solusi

Jelaslah, sesuai dengan judul tulisan ini. Yaitu dengan melakukan import SVG sebagai sebuah React Component. Bagaimana caranya?

import React from 'react'
import { ReactComponent as IconSearch } from '../assets/icons/icon-search.svg';

const Tutorial = () => {
  return (
    <div>
      <IconSearch className="w-6 h-6"/>
    </div>
  )
}

export default Tutorial

Ya, sesimple itu. IconSearch adalah nama dari komponen SVG kita. Sedangkan ReactComponent as BlaBlaBla adalah salah satu fitur yang dimiliki oleh react-script@2.0.0 versi keatas, dan react@16.3.0 versi keatas.

Dengan kita menggunakan cara ini, kita bisa mengubah SVG sesuai yang kita mau. Mau merubah warna atau fill SVG? Mau merubah size? Mau merubah warna saat hover element atau pseudoclass lain? Bisa.

Oh ya, konteksnya ini bila teman-teman menggunakan Create React App. Kalau teman-teman tidak menggunakan CRA. Bisa jadi menggunakan / setup Webpack sendiri atau NextJS maka teman-teman bisa menggunakan babel-plugin-inline-react-svg dari Airbnb. Cek di Github untuk dokumentasinya.

Besok, saya tuliskan bagaimana cara menggunakannya. Stay tune ya!