Cara Import SVG sebagai React Component di NextJS

Tutorial Nov 10, 2020

Problem

NextJS secara default tidak mendukung untuk bisa melakukan import pada SVG sebagai sebuah React Component. Sehingga, kita akan kesulitan bila melakukan perubahan atau customize pada SVG yang kita miliki

Pranala

Mungkin sebelumnya, teman-teman sedikit bertanya tanya. Kenapa kita harus mengimport SVG sebagai sebuah React Component? Bukankah lebih baik untuk melakukan hal hal pada umumnya? Menggunakan element / tag <img/> lalu import sumber gambar ?
Jawabannya, teman-teman bisa temukan pada artikel saya sebelumnya :

NextJS memang support untuk static file serve, kita bisa menggunaka gambar dalam format apapun termasuk dengan SVG. Namun, tidak seperti Create React App yang bisa secara otomatis mengimport SVG untuk dijadikan component, kita harus menggunakan cara yang berbeda.

Solusi

Caranya adalah dengan menggunakan salah satu packages dengan menggunakan babel dari Airbnb yaitu babel-plugin-inline-react-svg ( Github ).

Pertama, kita tambahkan babel-plugin-inline-react-svg pada proyek kita

npm install --save-dev babel-plugin-inline-react-svg

Kedua, kita tambahkan config untuk babel kita dengan membuat file baru di root folder NextJS kita dengan nama .babelrc dan dalam .babelrc kita tuliskan sebaga berikut

{
  "presets": ["next/babel"],
  "plugins": ["inline-react-svg"]
}

presets kita tulis seperti itu sesuai dengan dokumentasi di NextJS. Kalau kita menghapusnya, kita tidak akan bisa menggunakan dan akan memunculkan error. Sedangkan plugins kita tuliskan seperti itu karena saat ini kita sedang menggunakan plugins babel untuk import react svg sebagai sebuah komponen.

Ketiga, cara penulis dan import sebagai komponen berbeda dengan kita menuliskan di CRA. Kalau CRA menuliskan seperti ini

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

maka pada NextJS kita menuliskan seperti ini :

import IconSearch from '../assets/icons/icon-search.svg';

lengkapnya kurang lebih seperti ini :

import IconSearch from '../assets/icons/icon-search.svg';

export default function Home() {
  return (
    <div>
      <IconSearch className="w-8 h-6" />
      <h1>Hello Next.js</h1>
    </div>
  )
}

Cara lain sebenarnya bisa dengan menggunakan SVGR namun, kita harus setup di Webpacknya serta saya sendiri belum pernah mencobanya dan saat membaca-baca, saya merasa cara dengan menggunakan babel lebih mudah digunakan apalagi bagi mereka yang masih belajar menggunakan Webpack.