Use SVGs or React Components from array for custom pagination dots, error [object Object]

[ConnorIngold]

Hi all,

I'm sure this is a quick fix, and I'm messing up somewhere, but how do I use custom elements instead of dots for pagination in React?

Here's what I've got so far:

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

import "./styles.css";

// import required modules
import { Pagination } from "swiper";

const icons = [
  {
    icon: (
      <svg
        width="86"
        height="87"
        viewBox="0 0 86 87"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
        <rect x="10.5" y="11.125" width="75" height="75" stroke="#1A1918" />
      </svg>
    ),
  },
  {
    icon: (
      <svg
        width="91"
        height="84"
        viewBox="0 0 91 84"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
        <path
          d="M7.36379 83.25L48.5 12L89.6362 83.25H7.36379Z"
          stroke="#1A1918"
        />
      </svg>
    ),
  },
  {
    icon: (
      <svg
        width="88"
        height="91"
        viewBox="0 0 88 91"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
        <rect
          x="8.5"
          y="11.5"
          width="79"
          height="79"
          rx="39.5"
          stroke="#1A1918"
        />
      </svg>
    ),
  },
];

const Bullet = ({ bulletIcon, className }) => {
  return <div className={className}>{bulletIcon}</div>;
};

export default function App() {
  const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
      return (
        <Bullet className={className} bulletIcon={icons[index].icon}></Bullet>
      );
    },
  };

  return (
    <>
      <Swiper
        pagination={pagination}
        modules={[Pagination]}
        className="mySwiper"
      >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
      </Swiper>
    </>
  );
}

[phaniophrero]

Hi, did you find a way to do this? I want to create almost the same thing for my slider, but I actually want to add the Autoplay Progress from Swiper to be shown as dots pagination svg with a bit of change.