customization not working

[atharv-rem]

import { qrcode } from "etiket";

export default function EmployeeDetailPage({ params }: { params: { id: string } }) {
  // Generate the clean SVG string
  const qrSvg = qrcode(`https://yourportal.com/employee/${params.id}`, {
  size: 200,
  dotType: "dots",
  corners: {
    // Top Left: Red circular ring with a black dot center
    topLeft: { 
      outerShape: "dots",  // Changed from 'rounded' to 'dots' for symmetry
      innerShape: "dots", 
      outerColor: "#ff0000", 
      innerColor: "#000000" 
    },
    // Top Right: Black circular ring with a black dot center
    topRight: { 
      outerShape: "dots", 
      innerShape: "dots" 
    },
    // Bottom Left: Black circular ring with a black dot center
    bottomLeft: { 
      outerShape: "dots", 
      innerShape: "dots" 
    },
  },
});

  return (<div 
            style={{
              boxShadow: "0 226px 63px 0 rgba(212, 212, 212, 0.00), 0 145px 58px 0 rgba(212, 212, 212, 0.10)"
            }} 
            className="flex flex-col items-center justify-center w-[300px] h-[450px] bg-[#f8f8f8] rounded-[10px] border-[0.5px] border-[#d1cdcd] overflow-hidden"
          >
            {/* The QR Code Container */}
            <div 
              className="mb-[80px]" 
              dangerouslySetInnerHTML={{ __html: qrSvg }} 
            />

            {/* Employee Label Footer */}
          </div>
        </div>
      </div>
    </div>
  );
}

i am using this to create the QR but the qr looks like this

also pls update the document on how to create qr code in react cus i found it very difficult to implement it

[productdevbook]

Hi @atharv-rem! Thanks for the report.

I tested your exact code and the customization options (dotType, corners, colors) are working correctly on the latest version. The generated SVG includes dot-shaped modules and styled finder patterns as expected.

Could you check which version of etiket you're using?

npm ls etiket

If you're on an older version, please upgrade:

npm install etiket@latest

---

I also added a Framework Integration section to the README with React/Next.js examples (plus Vue, Svelte, Angular, and Astro). Here's a working React example with your exact styling:

import { qrcode } from "etiket";

function QRCode({ url }: { url: string }) {
  const svg = qrcode(url, {
    size: 200,
    dotType: "dots",
    ecLevel: "H",
    corners: {
      topLeft: { outerShape: "dots", innerShape: "dots", outerColor: "#ff0000" },
      topRight: { outerShape: "dots", innerShape: "dots" },
      bottomLeft: { outerShape: "dots", innerShape: "dots" },
    },
  });

  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

Alternatively, you can use <img> with a data URI (avoids dangerouslySetInnerHTML):

import { qrcodeDataURI } from "etiket";

function QRImage({ url }: { url: string }) {
  return <img src={qrcodeDataURI(url)} alt="QR Code" width={200} height={200} />;
}

Note: qrcode() is a pure function — it works in both Server Components and Client Components with no DOM dependency.

Let me know if upgrading fixes the issue! If not, could you share your package.json and the exact SVG output (console.log(qrSvg)) so I can debug further?

[atharv-rem]

Hey its working now. Also is there an easier way to add the logo, your property says it has to be in base 64 but can't we add a png. if not pls check my code as it returns a blank space in the middle of the qr. if you could recommend a simpler code to add the logo it would be really helpful

import { qrcodeDataURI } from "etiket";
import { readFileSync } from "node:fs";
import { join } from "node:path";

const faviconDataUri = `data:image/x-icon;base64,${readFileSync(
  join(process.cwd(), "app", "favicon.ico")
).toString("base64")}`;

function QRImage({ url }: { url: string }) {
  return <img src={qrcodeDataURI(url, {
    margin: 0,
    dotType: "dots",
    dotSize:1,
    color: "#000000",
    logo: {
      imageUrl: faviconDataUri,
      imageHeight: 20,
      imageWidth: 20,
    }    
  })} alt="QR Code" width={65} height={65} />;
}

[productdevbook]

Hey @atharv-rem! Thanks for reporting this. We've fixed several bugs and added new features in v0.11.0:

Fixes

1. SVG Data URI encoding bug — qrcodeDataURI() was producing broken data URIs when the SVG contained % characters (like width="100%"). This caused logos to not render when using the data URI output. Fixed now.

2. Finder pattern corner geometry — The rounded and extra-rounded corner shapes had a rendering bug where the inner hole was distorted. Fixed now — all corner shapes render correctly.

3. ICO format support — .ico / favicon files are now auto-converted to PNG! You no longer need to manually convert your favicon. Just pass it directly:

import { readFileSync } from "node:fs";
import { qrcodeDataURI } from "etiket";

const favicon = readFileSync("favicon.ico");

const qr = qrcodeDataURI(url, {
  margin: 2,
  dotType: "dots",
  color: "#000000",
  logo: {
    imageUrl: `data:image/x-icon;base64,${favicon.toString("base64")}`,
    // imageWidth/imageHeight are optional — omit them to auto-fill the logo area
  },
});

Tip: If you're using qrcodeDataURI() with an <img> tag, the logo will render correctly now. If you're using qrcode() with dangerouslySetInnerHTML, that also works.

Tip: Don't set imageWidth / imageHeight to small values (like 20) — if omitted, the image automatically fills the logo area (30% of QR size by default). You can control this with the size option (e.g., size: 0.2 for 20%).

Please update to v0.11.0 and let us know if everything works:

npm install etiket@latest

[atharv-rem]

yup resolved thank you