Cara Import SVG sebagai React Component di NextJS - Blog - Naufaldi Rafif Satriya

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.

Dukung Saya di Karyakarsa :

[

Dukung Naufaldi Rafif S di Karyakarsa!

Dukung Naufaldi Rafif S di Karyakarsa!

](https://karyakarsa.com/naufaldisatriya/tip?ref=blog.naufaldi.com)

Sumber Lain :

[

How to Import SVGs into your Next.js Project?

Next.js is my go-to framework for building any type of frontend applications. It has many things pre-configured right out of the box. For example, you have built-in support for css, css modules, sass etc. It also comes with built-in support for envir...

](https://blog.bhanuteja.dev/how-to-import-svgs-into-your-nextjs-project?ref=blog.naufaldi.com)

[

How To Import SVGs into NextJS

How to import SVGs into your NextJS TypeScript project using a custom babel or webpack configuration.

](https://medium.com/frontend-digest/how-to-import-svgs-into-nextjs-8ec6100e613f?ref=blog.naufaldi.com)

Bagikan[](https://twitter.com/share?text=Cara Import SVG sebagai React Component di NextJS&url=https://blog.naufaldi.com/cara-import-svg-sebagai-react-component-di-nextjs/ "Twitter")[](https://www.facebook.com/sharer/sharer.php?u=https://blog.naufaldi.com/cara-import-svg-sebagai-react-component-di-nextjs/ "Facebook")[](https://www.linkedin.com/shareArticle?mini=true&url=https://blog.naufaldi.com/cara-import-svg-sebagai-react-component-di-nextjs//&title=Cara Import SVG sebagai React Component di NextJS "LinkedIn")[](/cdn-cgi/l/email-protection#68571b1d0a020d0b1c552b091a0948210518071a1c483b3e2f481b0d0a090f0901483a0d090b1c482b07051807060d061c480c0148260d101c223b4e090518530a070c1155001c1c185247470a04070f460e09040c0146101112470b091a0945010518071a1c451b1e0f451b0d0a090f0901451a0d090b1c450b07051807060d061c450c0145060d101c021b47 "Email")

Topik Tutorial NextJS

[

Dunia Programming Tidak Hanya Berkutat seputar Logika dan Matematika

Kemarin lusa, saya mendapatkan permintaan jawaban menarik di Quora Indonesia. Q: Saya…

10 Nov 2020

](/dunia-programming-tidak-hanya-berkutat-seputar-logika-dan-matematika/)[

Alasan Import SVG sebagai React Component

Permasalahan Pertama Pernah tidak mencoba untuk merubah warna SVG ? Entah kebutuhannya saat…

09 Nov 2020

](/alasan-import-svg-sebagai-react-component/)