DEV Community: Rafael Franco

Fully vector QR codes with an SVG logo in React (download as scalable SVG)

Rafael Franco — Mon, 08 Jun 2026 13:22:00 +0000

I needed a QR code with a logo in the middle that I could put on a printed poster — which meant it had to stay sharp at any size. That ruled out almost every option I tried:

Canvas-based QR libraries hand you a raster image. Scale it up for print and it blurs.
The ones that do output SVG usually treat the logo as a separate raster <img> pasted on top — so even if the code is vector, the logo isn't.

What I actually wanted was one SVG where both the QR modules and the logo are vector paths — so I can drop it in a poster, a PDF, or a print job and it's crisp at any resolution.

That's what react-quick-response does. It renders the QR code as SVG (the encoding is handled by Project Nayuki's well-known QR Code generator library, bundled in — no extra runtime dependency), and it lets you pass an SVG logo as a child that stays vector too.

Fun fact, and the reason for the package name: QR actually stands for "Quick Response." It was invented in 1994 by Denso Wave to track car parts faster than a regular barcode could be scanned — most people never realize the "QR" is a real abbreviation.

Full disclosure: I'm the author. Here's the part I care about most — keeping everything vector.

Install

npm install react-quick-response

An SVG logo that stays an SVG

Pass any SVG element as a child. It isn't rasterized or pasted on as an image — it's inlined into the same <svg> as the QR modules. The component scales it to the largest size that's still scannable for your error-correction level, centers it, and knocks out the modules behind it automatically:

import { ReactQR } from "react-quick-response";
import Logo from "./logo.svg?react"; // an inline SVG component

<ReactQR value="https://react.dev" errorCorrectionLevel="H">
  <Logo />
</ReactQR>;

Because the logo lives in the SVG tree as real paths, there's no resolution to "max out" — it's resolution-independent, exactly like the code around it.

Download it as one scalable SVG

Here's the payoff. The whole thing — modules and logo — is a single <svg> node, so "exporting" is just serializing the DOM. No canvas, no rasterization, no quality loss:

import { useRef } from "react";
import { ReactQR } from "react-quick-response";
import Logo from "./logo.svg?react";

function DownloadableQR() {
  const ref = useRef<SVGSVGElement>(null);

  const downloadSvg = () => {
    if (!ref.current) return;
    // The serialized markup includes the QR paths AND the inlined logo —
    // all vectors, infinitely scalable.
    const data = new XMLSerializer().serializeToString(ref.current);
    const blob = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "qr-code.svg";
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <>
      <ReactQR
        ref={ref}
        value="https://example.com"
        size={256}
        errorCorrectionLevel="H"
      >
        <Logo />
      </ReactQR>
      <button onClick={downloadSvg}>Download SVG</button>
    </>
  );
}

Open that file in a browser or a vector editor (Figma, Illustrator, Inkscape) and zoom in forever — both the code and the logo are paths. Perfect for print, large-format, or anywhere you don't control the final size.

Need a PNG too? Draw the same SVG onto a <canvas> at whatever resolution you want and call toDataURL("image/png") — but for anything that gets scaled or printed, ship the SVG.

Why "keep it vector" matters

Print & large format — posters, stickers, packaging: a raster QR with a logo gets soft; a vector one doesn't.
One file, no compositing — the logo isn't a second asset you have to align and embed; it's already part of the SVG.
Tiny & editable — SVG paths are small and you can restyle colors in the file afterward.

A couple of extras

You also get module shapes (purely visual — same encoded data):

<ReactQR value="https://example.com" shape="dots" />
<ReactQR value="https://example.com" shape="rounded" />

…plus the usual size, margin, foregroundColor, backgroundColor, and error-correction controls. It's TypeScript-typed and SSR-friendly (it's just SVG markup, so it works in Next.js / Remix server rendering).

Try it

A live playground to tweak size, colors, error correction, shape, and logo — then download the SVG:

🎮 Demo: https://react-quick-response.rfoel.dev
📦 npm: https://www.npmjs.com/package/react-quick-response
💻 GitHub: https://github.com/rfoel/react-quick-response

If you put a vector QR + logo into a real print job with it, I'd love to see it. ⭐ and issues welcome.

Remix com serverless

Rafael Franco — Sat, 12 Nov 2022 14:26:12 +0000

Nessa postagem vamos aprender como fazer o deploy de uma aplicação Remix no serverless. Caso só queria ver o código, acesse esse link.

Ao criar uma nova aplicação Remix temos a possibilidade de escolher onde iremos subir nossa aplicação como Remix App Server, Express Server, Architect (AWS Lambda), Fly.io, Netlify, Vercel e Cloudflare Pages. Alguns desses não dão tanta margem pra escolha como Netlify e Vercel e outros requerem uma infraestrutura um pouco mais robusta para rodar como o Express Server. Pessoalmente eu prefiro ter controle total da minha aplicação ao invés de depender do dashboard do Vercel ou Netlify e das restrições que essas plataformas impõe, e mesmo que o Architect seja extremamente parecido com o que vamos aprender aqui, ele também tem suas próprias restrições e uma documentação não tão boa para iniciantes.

Por isso, ao conhecer o framework Remix eu fiquei curioso para saber se funcionaria em um ambiente serverless como o AWS Lambda, tendo total controle no deploy e sobre como a aplicação funciona. Procurando soluções já prontas me deparei com o repositório shamsup/remix-starter-serverless, que possui um README muito bem detalhado do processo e é basicamente isso que vamos resumir nessa postagem.

Para iniciar, podemos criar uma nova aplicação Remix usando o template do Architect (AWS Lambda), que possui uma configuração similar ao que vamos usar aqui.

npx create-remix@latest 
? Where would you like to create your app? remix-serverless
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Architect (AWS Lambda)
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes
💿 That's it! `cd` into "/Users/rafael/Developer/remix-serverless" and check the README for development and deploy instructions!

Logo de cara podemos apagar alguns arquivos que não vamos utilizar como server.js, app.arc e server/config.arc. Também podemos apagar os scripts dev:arc e start do nosso package.json.

"scripts": {
  "build": "remix build",
  "dev:remix": "remix watch",
  "dev:arc": "cross-env NODE_ENV=development arc sandbox",
  "dev": "remix build && run-p \"dev:*\"",
  "start": "cross-env NODE_ENV=production arc sandbox"
}

Agora vamos instalar as dependências do serverless pra nossa configuração.

npm install serverless esbuild serverless-esbuild serverless-s3-sync -D

No arquivo remix.config.js, vamos apagar o campo server e adicionar um novo chamado serverBuildDirectory.

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverBuildTarget: 'arc',
  ignoredRouteFiles: ['**/.*'],
  server: 'server.js',
  serverBuildDirectory: 'server/build',
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "server/index.js",
  // publicPath: "/_static/build/",
}

Com as dependências instaladas e o arquivo de configuração atualizado, podemos criar dois novos arquivo chamados serverless.yml onde ficará a configuração da nossa aplicação e server/remix.ts onde ficará o nosso Lambda handler do Remix.

import { createRequestHandler } from '@remix-run/architect'
import type { ServerBuild } from '@remix-run/node'

const build = require('./build') as ServerBuild

export const handler = createRequestHandler({
  build,
  getLoadContext() {
    return {}
  },
})

Esse arquivo será o handler da nossa Lambda e receberá todas as requisições do cliente.

Agora vamos ver o arquivo de configuração do serverless.

service: remix-serverless

frameworkVersion: '3'

plugins:
  - serverless-esbuild
  - serverless-s3-sync

provider:
  name: aws
  runtime: nodejs16.x
  stage: ${opt:stage, 'dev'}
  region: ${opt:region, 'us-east-1'}

custom:
  esbuild:
    bundle: true
    minify: false
    sourcemap: true
    sourcesContent: false
    exclude: ['aws-sdk']
    target: 'node16'
    platform: 'node'

  s3Sync:
    buckets:
      - bucketNameKey: WebsiteBucketName
        bucketPrefix: website/
        localDir: public

functions:
  remix:
    handler: server/remix.handler
    events:
      - httpApi:
          method: any
          path: '/{proxy+}'

resources:
  Resources:
    HttpApi:
      Type: AWS::ApiGatewayV2::Api
      Properties:
        Name: HttpApi-${self:service}
        ProtocolType: HTTP

    WebsiteBucket:
      Type: AWS::S3::Bucket
      Properties: {}

    WebsiteOriginAccessIdentity:
      Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
      Properties:
        CloudFrontOriginAccessIdentityConfig:
          Comment: Origin Access Identity to Access ${self:service} Website Bucket

    WebsiteBucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket: !Ref WebsiteBucket
        PolicyDocument:
          Statement:
            - Effect: Allow
              Action:
                - s3:GetObject
              Resource:
                Fn::Join:
                  - /
                  - - Fn::GetAtt:
                        - WebsiteBucket
                        - Arn
                    - '*'
              Principal:
                CanonicalUser:
                  Fn::GetAtt:
                    - WebsiteOriginAccessIdentity
                    - S3CanonicalUserId

    CDN:
      Type: AWS::CloudFront::Distribution
      DependsOn:
        - WebsiteBucket
        - HttpApi
      Properties:
        DistributionConfig:
          Enabled: true
          Origins:
            - DomainName:
                Fn::GetAtt:
                  - WebsiteBucket
                  - RegionalDomainName
              Id: StaticOrigin
              S3OriginConfig:
                OriginAccessIdentity:
                  Fn::Join:
                    - /
                    - - origin-access-identity
                      - cloudfront
                      - !Ref WebsiteOriginAccessIdentity
              OriginPath: '/website'
            - DomainName:
                Fn::Join:
                  - ''
                  - - Ref: HttpApi
                    - '.execute-api.${self:provider.region}.amazonaws.com'
              Id: RemixOrigin
              CustomOriginConfig:
                OriginProtocolPolicy: https-only
                OriginSSLProtocols: [TLSv1.2]
          DefaultCacheBehavior:
            AllowedMethods: [GET, HEAD, OPTIONS, PUT, PATCH, POST, DELETE]
            CachedMethods: [GET, HEAD, OPTIONS]
            Compress: true
            TargetOriginId: RemixOrigin
            ViewerProtocolPolicy: redirect-to-https
            ForwardedValues:
              QueryString: true
              Cookies:
                Forward: none

  Outputs:
    WebsiteBucketName:
      Value:
        Ref: WebsiteBucket
    DistributionID:
      Value:
        Ref: CDN
    WebsiteDomain:
      Value:
        Fn::GetAtt: [CDN, DomainName]

Esse é o arquivo de configuração padrão do serverless. Com isso, você terá o mínimo necessário para conseguir subir sua aplicação na AWS.

Alguns pontos interessantes dessa configuração é que além de um Lambda que recebe as requisições, também estamos usando o CloudFront como CDN e o S3 para armazenar nossos arquivos estáticos. Sobre esse último, usamos o plugin serverless-s3-sync para subir esses arquivos diretamente no bucket em todo deploy.

Next.js com serverless-stack

Rafael Franco — Sat, 12 Nov 2022 14:22:06 +0000

Existem algumas formas de fazer deploy de uma aplicação React ou Next.js no ambiente da AWS sem custos. Por exemplo, é possível subir uma aplicação React pura usando apenas CloudFront e o S3, porém como o Next.js existe a opção de usarmos como SSR vamos usar o serverless-stack. Há outras formas de fazer isso como o Vercel (criadores do Next.js), Amplify e Serverless Next.js (sls-next) Component, mas na minha opinião a abstração que o serverless-stack (ou SST) é a melhor dentre as opções.

Você pode conferir o código final aqui.

O que você vai precisar

Uma conta na AWS;
AWS CLI instalado;

Criando uma aplicação SST

O serverless-stack possuí uma CLI que facilita a criação de uma aplicação inicial, similar com o create-react-app (CRA) do React e create-next-app do Next.js.

npx create-serverless-stack nextjs-app
cd nextjs-app

Dentro do diretório nextjs-app você vai ver um arquivo chamado sst.json com o conteúdo:

{
  "name": "nextjs-app",
  "region": "us-east-1",
  "main": "stacks/index.js"
}

A propriedade name é o nome da aplicação, region é a região que sua aplicação será hospedada e main é o arquivo principal da sua aplicação SST. Por padrão a região selecionada sempre será us-east-1, mas é possível trocar por sa-east-1 por exemplo, que são os servidores da AWS em São Paulo.

No mesmo diretório também haverá uma pasta chamada stacks, que é onde fica o código que servirá para gerar a infraestrutura da aplicação.

Para este exemplo, vamos apagar a pasta src que o SST criou por padrão porque vamos colocar nossa aplicação Next.js em uma pasta com esse mesmo nome.

rm -rf src

Criando uma aplicação Next.js

Para criar a aplicação vamos usar o create-next-app, que vai gerar uma aplicação do Next.js padrão. Nossa aplicação ficará no diretório src.

npx create-next-app src

Para esse exemplo não vamos fazer nenhuma alteração no diretório do Next.js.

Configurando Next.js no SST

Agora vamos configurar nossa aplicação Next.js no arquivo stacks/MyStack.js. Inicialmente esse arquivo vai conter um exemplo de uma configuração de um lambda. Podemos remover essa configuração e colocar a seguinte configuração:

import * as sst from '@serverless-stack/resources'

export default class MyStack extends sst.Stack {
  constructor(scope, id, props) {
    super(scope, id, props)

    // Configuração do Next.js aqui
    const site = new sst.NextjsSite(this, 'Site', {
      path: 'src',
    })

    this.addOutputs({
      URL: site.url,
    })
  }
}

Em path será onde sua aplicação do Next.js está.

Subindo a aplicação

Nesse ponto já podemos subir nossa aplicação com o seguinte comando:

npm run deploy -- --stage prod

Esse comando vai subir a infra da nossa aplicação e mostrar a URL da nossa aplicação. Essa URL será do CloudFront, mas é possível configurar um domínio customizado diretamente no SST, mas isso é conteúdo para outra postagem.